max-width: 100% 不适用于带有 srcset 的图像答案

【问题标题】：max-width: 100% not working on images with srcsetmax-width: 100% 不适用于带有 srcset 的图像
【发布时间】：2015-09-22 18:45:51
【问题描述】：

我有这个：

.wrapper {
  max-width: 1200px;
}
img {
  max-width: 100%;
}

<div class="wrapper">
  <h1>Hola</h1>
  <img src="http://s30.postimg.org/tosov034h/small.png"
       srcset="http://s30.postimg.org/72ndi9pe9/large.png 1024w,
               http://s30.postimg.org/ybyqwrqhd/medium.png 640w,
               http://s30.postimg.org/tosov034h/small.png 320w"
       alt="owl">
</div>

我认为这不适用于 sn-p 所以，你可以在这里查看：http://codepen.io/vandervals/pen/ZbOMNR

问题是，当 1024 像素的图像加载时，我预计 max-width: 100% 会开始工作，并将图像显示限制为实际宽度（1024 像素）。这不是发生的事情，因为它一直在增长，因为它有 width:100% 并停在 1200 像素，这是包装器的最大宽度。

为什么这不起作用？我应该怎么做才能将图像的最大尺寸限制为最大实际尺寸？

【问题讨论】：

如何将包装器的max-width 制作成width:1200px; 和img{max-width:100%;
不要在img 标签或wrapper 类中提及任何width 或max-width`。它将以实际大小加载图像
@Rajeshkannan 不像你说的那样工作。另外，如果没有支持会怎样？

标签： css html srcset

【解决方案1】：

您省略了无效的sizes 属性。省略时，默认为100vw，因此图像将具有该宽度。如果你想要 100vw 低于 1024px 和 1024px 以获得更宽的视口，你可以做类似sizes="(min-width: 1024px) 1024px, 100vw"

【讨论】：

这不是把排版和内容分发混为一谈吗？
有点——但如果你想让浏览器在各种不同的场景中显示各种图像文件，你需要告诉它这些场景是什么。
出现这种情况的原因是浏览器会尽快开始下载图像——在外部 CSS 被下载和解析之前。因此，图像的预期大小必须在标记中，否则与 <img src> 相比，具有响应式图像的页面会产生页面加载损失，这是不可接受的。

【解决方案2】：

如果你想以 100% 宽度显示图像，

然后使用

min-width:100%;

【讨论】：