縦横比(アスペクト比)を固定できるaspect-ratioについて具体例を交えて解説！

コーディングしていると、縦横比(アスペクト比)を保持しながら、レスポンシブ対応させたい場合があります。

昔はpaddingを使ったテクニックで対応していましたが、今はaspect-ratioを使うともっと簡単です。

この記事ではaspect-ratioの使い方を具体例を交えて紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

aspect-ratioとは？

aspect-ratioで縦横比(アスペクト比)を指定すると、その比率の領域を作ることができます。動画は下のコードを指定しています。

<div class="hoge"></div>

.hoge {
    aspect-ratio: 2 / 1;
    background-color: #eee;
}

従来のpaddingを使ったテクニックと不便な点

aspect-ratioが使えなかった頃は、paddingを使った方法で縦横比(アスペクト比)を保持することがメジャーです。

<div class="hoge"></div>

.hoge {
    padding-top: 50%;
    background-color: #ddd;
}

例えばYouTubeの埋め込みに使う場合、YouTubeの縦横の比率は、横16:縦9です。従って、9 ÷ 16 × 100 = 56.25%を指定します。

このように直感的でないことが不便な点です。また、aspect-ratioを使った方法に比べてコード量も増えます。(詳しくは次のセクションを参照)

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

aspect-ratioの具体的な使い所3選

aspect-ratioが使える具体的な3つの場面を紹介します。paddingを使ったコードも記載しているので、コード量が減ることも確認できます。

YouTubeやGoogleマップのなどの埋め込み

YouTubeをレスポンシブで表示した時の挙動です。

YouTubeやGoogleマップはただコードを埋め込んだだけでは、コンテナサイズに合わせて、縦横比を維持しながらレスポンシブで表示出来ません。

<div class="youtube">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/z1eRHWynOMU" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

.youtube {
    aspect-ratio: 16 / 9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

上ように書くことで、YouTubeの比率(16:9)を保ちながら、レスポンシブで表示出来ます。

padding を使った方法

.youtube {
    position: relative;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

aspect-ratioを使った方法とHTMLは同じです。

ブログ等のサムネイル(object-fitと一緒に使う方法)

縦横比の違うサムネイル画像をレスポンシブで表示した時の挙動です。

<div class="posts">
    <div class="post">
        <div class="post-img">
            <img src="img/post.jpg" alt="" />
        </div>
        <h2 class="post-title">アスペク比に関しての説明</h2>
    </div>

    ...
</div>

.posts {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

@media screen and (min-width: 500px) {
    .posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 700px) {
    .posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-img img{
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

CMSを使ったブログなどでは、投稿する人が画像の縦横比を揃えるなどの編集が出来るとは限りません。

従って、どんな縦横比の画像を投稿しても見栄えが悪くならないようにする必要があります。動画のデモはあえて、縦長の画像と横長の画像を使っています。aspect-ratioとobject-fitで画像をトリミングしています。

padding を使った方法

.post-img {
    position: relative;
    padding-top: 50%;
}

.post-img img {
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

aspect-ratioを使った方法と異なる箇所だけ切り取りました。

アートディレクションする際のレイアウトシフト防止

レイアウトシフトを防止した時の挙動です。

画像のレイアウトシフトは、widthとheightを指定することで防げます。しかし、アートディレクションで縦横比が異なる画像を出し分ける際は、問題があります。

レイアウトシフトに関しては、下記の記事で紹介しています。

レイアウトシフト(Cumulative Layout Shift)とは？対策・改善方法も紹介！

アートディレクションに関しては、下記の記事の後半で紹介しています。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

<div class="art-direction">
    <picture>
        <source media="(max-width: 599px)" srcset="img/sp.png" />
        <source media="(max-width: 699px)" srcset="img/tb.png" />
        <img width="1600" height="800" src="img/pc.png" alt="" />
    </picture>
</div>

.art-direction {
    aspect-ratio: 800 / 1000;
}

@media screen and (min-width: 500px) {
    .art-direction{
        aspect-ratio: 800 / 800;
    }
}

@media screen and (min-width: 700px) {
    .art-direction{
        aspect-ratio: 1600 / 800;
    }
}

表のように画像を出し分けたいときは、上のコードのようになります。これでレイアウトシフトを防止することができます。

paddingを使った方法

.art-direction {
    padding-top: 125%;
    position: relative;
}

@media screen and (min-width: 500px) {
    .art-direction {
        padding-top: 100%;
    }
}

@media screen and (min-width: 700px) {
    .art-direction {
        padding-top: 50%;
    }
}

.art-direction img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

aspect-ratioを使った方法と異なる箇所だけ切り取りました。

独学に限界を感じていませんか？