CSS3: div 等のブロック要素を width にあわせたアスペクト比にする

img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。
一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。

今回は可変する width に対し、アスペクト比による高さを指定する方法を説明したいと思います。

目次

  • ブロック要素を width にあわせたアスペクト比にする
  • まとめ

ブロック要素を width にあわせたアスペクト比にする

ここでは、width 100% に対し、正方形(height 100%)の div を作成します。

HTML

ネストになる div を作成します。

<div class="aspect-container">
    <div class="aspect-content">Aspect content</div>
</div>

CSS

外側の div (aspect-container) の before 要素の padding-top を 100% とすることで、width 100% に対して 100% の高さを確保します。

.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;
}

まとめ

アスペクト比を維持したまま、ウインドウサイズや親要素の width に応じて、子ブロック要素の height を変えたい場合に有効な方法です。

今回は正方形を例にしましたが、before の padding-top の比率 を変更することで、任意のアスペクト比への対応も可能です。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents