Aspect ratio でアスペクト比を固定する方法【CSS】

ある日のこと。子要素のアスペクト比を固定したい要望がありました。

拡縮時もアスペクト比を維持しなければなりません。

CSSでアスペクト比を固定する方法

“aspect-ratio”を使用しましょう。

例えばDiv要素のアスペクト比を固定できます。

使用例

Div要素に横サイズを指定してAspect比を指定します。縦のサイズは自動計算されます。

.box {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 512px;
}

この”.box”クラスは、16/9の比率を維持します。

横幅は100%なので親要素に追従します。しかし最大幅はmax-widthで決められています。

“height: auto”を指定するサンプルが多かったですが、不要のようです。

画像にaspect ratioを使ってみる

画像にも適用できます。

<img src="256x144px.png" width="256" height="144" />

元々は16/9の画像です。アスペクト比 1/1 に変更してみましょう。

.img {
    aspect-ratio: 1 / 1;
    width: 144px;
}

画像もアスペクト比を変更できましたね。

imgタグの属性でwidth、heightを指定していなかった場合は、cssプロパティでwidth、heightのどちらかの指定でアスペクト比は保持されました。

本例のようにimgタグの属性にwidth、heightを指定している場合、cssプロパティのwidthの指定のみ有効でした。

基本CSSではwidthとaspect-ratioを指定するのがいいようですね。

画像の感想

画像にはあまり使わないと思います。

画像の親要素にaspect-ratioを指定して、画像はobject-fitで制御するのがいいかなと。

まとめ

アスペクト比を指定する方法

• widthを指定する
• aspect-ratioで比率を指定する

.box {
    aspect-ratio: 16 / 9;
    width: 128px;
}

応用例）レスポンシブしつつ、横幅Max値を指定したい場合

.box {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 128px;
}

以上