Question

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

然而，在我的图片中＆＃39;尺寸属性我已为移动设备和平板电脑定义了默认尺寸100vw。这适用于最大版本宽度大于100vw的图像。然而，这会产生较小的图像，其原始尺寸小于100vw，因此它们变得非常丑陋。

我认为max-width: 100%;图像会阻止它们扩大规模。我理解sizes属性是告诉浏览器图像显示大小的一种方式，但是没想到它会扩展图像 - 或者至少服从添加的CSS规则。

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

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

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

Answer 1

你误解了这个概念。

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

您可以在此轻松查看效果：

＆＃13;

<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>

＆＃13;

如果要限制图像大小，请将其包装在div中。

然后，在该div上，设置所需的宽度。

图像将缩放到该宽度。

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

Answer 2

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

img的尺寸属性缩放图像，不服从最大宽度

2 个答案: