:比率div
を維持しながら、大きな画像がより狭い幅のコンテナーに収まるように、画像のサイズを自動的に変更するにはどうすればよいですか?width
height
例: stackoverflow.com - 画像がエディター パネルに挿入され、画像が大きすぎてページに収まらない場合、画像のサイズは自動的に変更されます。
ベストアンサー1
画像タグに明示的な幅や高さを適用しないでください。代わりに、次のように指定します。
max-width:100%;
max-height:100%;
また、height: auto;
幅のみを指定したい場合も。
例:http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="https://i.sstatic.net/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="https://i.sstatic.net/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="https://i.sstatic.net/xkF9Q.jpg">
</div>