Question

我有这个：

＆＃13;

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

＆＃13;

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

＆＃13;

我认为这不适用于该代码段，因此您可以在此处查看：http://codepen.io/vandervals/pen/ZbOMNR

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

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

Answer 1

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

的事情

Answer 2

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

然后使用

min-width:100%;

max-width：100％不使用srcset

2 个答案: