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

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”；您应该忽略它。）