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

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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

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

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

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

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

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！