可能有基于 % 的元素大小，但有最大的 PX 宽度它将转到？

Question

我正在设计一个移动网站，我希望我使用的图像是流畅的，以匹配个人的浏览器大小。但是，我不希望有人以巨大的浏览器分辨率或刚从我的下一个媒体查询中出现的东西来到该网站并让它看起来很糟糕。所以我想知道图像是否可以有最大宽度？例如，如果我将图像设置为 90% 的宽度，但它可以说是这样的，但是，它最多只能是 500px 长，之后它只会说 500px 长。 （我也想用其他元素来做这个，比如 div 包装器）

另外，使用 % 时，图像是否保持相同的纵横比？

Answer 1

max-width 的正确行为应该覆盖图像的width。像这样：

img {
    width: 90%;
    max-width: 500px;
}

MDN 页面：https://developer.mozilla.org/en-US/docs/CSS/max-width#Notes