具有首选宽度，最小宽度和最大宽度的图像

Question

我有一张图片，我希望根据以下规则进行扩展，重要性日益增加：

• 通常宽度为38％（父/屏幕）;
• 不小于300px;
• 永远不会超过100％（父/屏幕）（如果父/屏幕小于300px，则只会出现问题;

也就是说：图像只占可用空间的一定百分比，但在较小的屏幕上不应太小。但是，对于非常小的屏幕（移动设备），图像可能永远不会超过可用空间的整个宽度，即使这意味着它会缩小到最小宽度以下。

我以为我可以使用以下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尺寸的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”;您应该忽略它。）