縦横比を維持したボックス要素
縦横比を維持したまま拡大、縮小できるボックス要素の作り方です。width:100%にして縦横の比率をpadding-bottom: 56.25%で指定しています。これは、高さ÷幅×100の値です。画像を内包したりする際に使用しますが、アスペクト比と合わない場合は画像の下のほうが表示されなくなります。
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts"></div>コピー
.my-parts {
padding: 0 0 56.25% 0;
margin: 0;
width: 100%;
height: 0;
background: #eee;
overflow: hidden;
}
.my-parts img {
max-width: 100%;
height: auto;
margin: 0;
}
