img 的尺寸属性放大图像，不遵守最大宽度答案

【问题标题】：img's sizes attribute scales images up, doesn't obey max-widthimg 的尺寸属性放大图像，不遵守最大宽度
【发布时间】：2015-07-23 01:37:00
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

欢迎来到 StackOverflow。你似乎误解了这个概念。使用max-width:100%; 只会将宽度限制为容器的 100%。在这里查看：jsfiddle.net/pnz2kgxL（尝试重新调整面板）。
max-width:100% 是根据父元素的大小来判断的，不是原图尺寸^^。
感谢您的提琴！我想我误解了，因为更常见的情况是在一个小容器中安装一个大图像。您对处理小于其容器的图像有什么建议吗？当我添加 sizes 属性时，它似乎像 width 属性一样工作并缩放图像，例如100vw 会让它膨胀。可能我需要将图像版本的各自宽度设置为sizes 中的宽度，对吧？类似：srcset="large-600x400.jpg 600w, small-300x200.jpg 300w" sizes="(max-width: 400px) 300px, 600px"

标签： html css image responsive-design

【解决方案1】：

你误解了这个概念。

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> 所做的那样。

【讨论】：

【解决方案2】：

这有点猜测，但您是否尝试过在max-width:100% 之前添加width:auto;？

【讨论】：