css - 具有首选宽度、最小宽度和最大宽度的图像

Question

我有一张图片，我想根据以下规则对其进行缩放，重要性越来越大:

• 通常具有 38% 的宽度(父级/屏幕的)；
• 不小于 300px；
• 永远不会大于(父级/屏幕的)100%(只有当父级/屏幕小于 300 像素时才会出现问题；

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

我想我可以用下面的 CSS 做到这一点:

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

认为 max-width 会优先于 min-width 因为它出现得更晚。但它不起作用...图像显示为所需的百分比，并且没有缩小到 300 像素以下。但是，在小屏幕 (<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://via.placeholder.com/999x333"/></p>
<p><img src="https://via.placeholder.com/999x333" style="width:400px"/></p>

在此示例中，两张图片都不会小于窗口的 38%，也不会大于窗口的 100%，并且第一张图片首选 300 像素，而第二张图片首选 400 像素。

(请注意，图像本身说它们是“999×333”；您应该忽略它。)