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、画像はその幅になります。より広いビューポート用に 1024px および 1024px 未満の 100vw が必要な場合は、次のようにすることができます。sizes="(min-width: 1024px) 1024px, 100vw"

于 2015-09-22T09:00:38.553 に答える
-4

画像を100%幅で表示したい場合は、

次に使用します

min-width:100%;
于 2015-09-22T09:19:05.923 に答える