img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。
一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。
今回は可変する width に対し、アスペクト比による高さを指定する方法を説明したいと思います。
目次
- ブロック要素を width にあわせたアスペクト比にする
- まとめ
ブロック要素を width にあわせたアスペクト比にする
ここでは、width 100% に対し、正方形（height 100%）の div を作成します。
HTML
ネストになる div を作成します。
[code]
[/code]
CSS
外側の div (aspect-container) の before 要素の padding-top を 100% とすることで、width 100% に対して 100% の高さを確保します。
[code]
.aspect-container {
position: relative;
width: 100%;
}
.aspect-container:before {
content:””;
display: block;
padding-top: 100%;
}
.aspect-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
[/code]
まとめ
アスペクト比を維持したまま、ウインドウサイズや親要素の width に応じて、子ブロック要素の height を変えたい場合に有効な方法です。
今回は正方形を例にしましたが、before の padding-top の比率 を変更することで、任意のアスペクト比への対応も可能です。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
