img 的 sizes 属性放大图像，不遵守 max-width

Question

我正在尝试为内容图像（文章中的图像）实现响应式图像，img/srcset/sizes 方式。我有一个响应式网站，它具有用于移动设备和平板电脑的单列布局，图像拉伸至 100%。我在 CSS 中使用 max-width: 100%; height: auto; 并且希望图像不会超过其原始尺寸。

但是，在我的图像尺寸属性中，我为手机和平板电脑定义了默认尺寸 100vw。这适用于最大版本的宽度大于实际宽度 100vw 的图像。然而，这会产生更小的图像，其原始尺寸小于 100vw，因此它们变得非常丑陋。

我认为在图像上 max-width: 100%; 会阻止它们放大到比应有的更大。我将 sizes 属性理解为一种告诉浏览器将以何种尺寸显示图像的方式，但没想到它会缩放图像 - 或者至少遵守添加的 CSS 规则.

我在 Chrome 和 Firefox 中有相同的行为...所以我不确定这是否与

有关

顺便说一句：尺寸属性是在导入脚本中以编程方式设置的，因此大图像和小图像的处理方式相同。

不知道我在做什么或理解错了。任何帮助表示赞赏！谢谢！

Answer 1

有点猜，不过你试过在max-width:100%之前加上width:auto;吗？

Answer 2

你误解了这个概念。

max-width只根据父容器限制宽度

你可以在这里轻松看到效果：

<img src="http://placehold.it/300x150.png" width="500" style="max-width:100%;">
    
<div style="max-width:50%;">
    <img src="http://placehold.it/300x150.png" width="1000" style="max-width:100%;">
</div>

如果您想限制图片大小，请将其包裹在 div 中。

然后，在 div 上设置您想要的宽度。

图像将放大到该宽度。

基本上，就像我对 <div> 所做的那样。

img 的 sizes 属性放大图像，不遵守 max-width

img's sizes attribute scales images up, doesn't obey max-width

html

css

image

responsive-design