具有首選寬度，最小寬度和最大寬度的圖像

Question

我有一張圖片，希望根據以下規則進行縮放，並且越來越重要：

• 通常具有（父級/屏幕的）寬度的38％；
• 不小於300像素；
• 永遠不會大於（父/屏幕的）100％（僅當父/屏幕小於300px時才出現問題；

也就是說：圖像僅占用可用空間的一部分，但在較小的屏幕上不應變得太小。 但是，對於非常小的屏幕（移動設備），圖像可能永遠不會超出可用空間的整個寬度，即使這意味着它會縮小到最小寬度以下。

我以為可以使用以下CSS執行此操作：

img {
    width: 38%;
    min-width: 300px;
    max-width: 100%;
}

認為max-width將優先於min-width因為它稍后出現。 但是它不起作用...圖像顯示為所需的百分比，並且未縮小到300px以下。 但是，在小屏幕（<300px）上，圖像會延伸到屏幕之外（出現滾動條）。

閱讀文檔時， min-width會覆蓋max-width ，所以我應該已經看到這種情況了...

一種顯而易見的解決方案是添加媒體查詢：

@media screen and (max-width: 300px) {
    img {
        min-width: 0;
        width: 100%;
    }
}

但是，我希望能夠從html（標記樣式）中覆蓋寬度詳細信息（即38％或300px的值）。

關於SO的幾個問題都涉及規模問題，但我找不到確切的案例。 這里有人提出解決方案/建議嗎？

一些附帶要求：

• 應該可以在主要的瀏覽器html5 / css3中使用
• 沒有javascript（如果事實證明僅使用CSS是不可能的，我將創建一個js解決方案，但是我不希望使用js）
• 沒有媒體查詢（見上文）
• 我可以控制html，因此如果需要，可以在其他元素中嵌套

Answer 1

如果min-width覆蓋max-width ，則解決方案是不將min-width設置為可能大於窗口寬度的值。
換句話說，圍繞width和min-width的值交換。 然后，您將不需要媒體查詢或JavaScript。

 img { width:300px; min-width:38%; max-width:100%; } 

 <p><img src="https://placehold.it/999x333"/></p> <p><img src="https://placehold.it/999x333" style="width:400px"/></p> 

在此示例中，兩個圖像都不會小於窗口的38％，也不會大於窗口的100％，並且第一個圖像更喜歡300px，而第二個圖像更喜歡400px。

（請注意，圖像本身說它們是“ 999×333”；您應該忽略它。）