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

我试图为内容图像（文章中的图像），img/srcset/sizes方式实现响应式图像。我有一个适用于移动设备和平板电脑的单列布局的响应式网站，图像伸展至100％。我在CSS中使用了max-width: 100%; height: auto;，并希望图像不会超出其原始尺寸。img的尺寸属性缩放图像，不服从最大宽度

但是，在我的图片尺寸属性中，我为移动设备和平板电脑定义了默认尺寸100vw。这适用于最大版本宽度大于100vw的图像。然而，这样会吸取较小的图像，其原始尺寸比100vw小，因此它们变得非常难看。

我认为max-width: 100%;的图像会阻止它们扩大比他们应该更大。我了解到sizes属性是一种告诉浏览器显示图像大小的方式，但并没有期望它缩放图像 - 或者至少服从添加的CSS规则。

我在Chrome和Firefox相同的行为......所以我不知道这是有关this issue

BTW：大小属性是在导入脚本编程设置，使大，小图片以同样的方式处理。

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

来源

2015-05-12 Thomas

欢迎来到StackOverflow。你似乎误解了这个概念。使用'max-width：100％;'只会将容器的宽度限制为100％。在这里检查：http://jsfiddle.net/pnz2kgxL/（尝试重新调整面板）。 –

max-width：100％是由父元素的大小判断的，而不是原始图像的维度^^。 –

感谢您的小提琴！我想我误解了，因为更常见的情况是在一个小容器中放置一个大图像。您是否有建议处理小于其容器的图像？当我添加“尺寸”属性时，它似乎像“宽度”属性一样工作并缩放图像，例如， '100vw'会夸大它。可能我需要将图像版本的各个宽度设置为'sizes'中的宽度，呵呵？类似于： 'srcset =“large-600x400.jpg 600w，small-300x200.jpg 300w”sizes =“（max-width：400px）300px，600px”' – Thomas

你误解了这个概念。

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>一样。

来源

2015-05-12 09:26:17

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

来源

2015-05-12 09:17:35 Nathan

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

回答

相关问题