2

我有这个：

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

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

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

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

4

2 回答 2

2

您省略了sizes无效的属性。省略时，默认为100vw使图像具有该宽度。如果您希望 100vw 低于 1024px 和 1024px 以获得更宽的视口，您可以执行类似的操作sizes="(min-width: 1024px) 1024px, 100vw"

于 2015-09-22T09:00:38.553 回答
-4

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

然后使用

min-width:100%;
于 2015-09-22T09:19:05.923 回答