圖像與優選的寬度，最小寬度和最大寬度

Question

我有我想根據與日益增加的重要性下面的規則按比例繪製，其圖像：

• 通常具有38％的寬度（的父母/屏幕）;
• 不會小於300px;
• 永遠不會成爲大於100％，只有一個問題（的父/屏幕）（如果父/屏幕小於300像素;

也就是說：圖像僅需可用的百分比但對於非常小的屏幕（移動設備），圖像可能永遠不會超過可用空間的整個寬度，即使這意味着它會縮小到最小寬度以下。

我想我可以用下面的CSS來做到這一點：

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

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

閱讀文檔，min-width overrides 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％時，與第一圖像300像素偏好而第二個更喜歡400像素。

（請注意，圖像本身說，他們是「999×333」;你應該忽略）