CSSで縦横比(アスペクト比)を固定できるaspect-ratioについて！具体的な使い道も紹介！

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

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

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

---

私たちが運営している、現役エンジニアによるメンタリングサービス：Hello Mentorは、1人1人にオーダーメイドでロードマップを作成しています。

web制作/web開発/デザインまで、経験豊富な現役エンジニアがメンターをします。

• 検索しても解決しない問題が多い...
• 勉強方法や目指す方向が合っているか不安...
• 転職・独立できるのか不安...
• SNS等で情報が多すぎて何が本当かわからない...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

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を使った方法に比べてコード量も増えます。(詳しくは次のセクションを参照)

具体的な使い所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を指定することで防げます。しかし、アートディレクションで縦横比が異なる画像を出し分ける際は、問題があります。

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

CLS(Cumulative Layout Shift)とは？対策・改善方法も紹介！

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

HTMLのsrcset属性や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を使った方法と異なる箇所だけ切り取りました。

【プログラミンング学習中の方へ！】独学の非効率さを解消して3倍速でスキルアップしませんか？