图像与优选的宽度，最小宽度和最大宽度

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”;你应该忽略）