【CSS】aspect-ratioで画像サイズ比率をキープ！画像トリミングを簡単に

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

今回は、最近特に注目されているCSSプロパティ
aspect-ratio
についてご紹介します。レスポンシブ対応で画像やボックスの比率をきれいに保ちたいとき、すごく便利なプロパティです◎画像のサイズ比率、崩れてませんか？

aspect-ratioとは？

CSSのaspect-ratioは、要素の幅と高さの比率を指定できるプロパティです。

img {
  aspect-ratio: 4 / 3;
}

これだけで、画像の表示サイズが常に「4:3」で保たれます。高さを自動で計算してくれるんです。便利！

object-fitとの組み合わせが神！

画像をトリミングして、枠いっぱいにきれいに表示したいときは object-fit を組み合わせましょう。

.image-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 正方形に切り抜き */
  object-fit: cover;   /* はみ出す部分はトリミング */
  border-radius: 8px;
}

object-fit: cover を使うと、画像をズームしてはみ出す部分を自動トリミングしてくれます。

iframeにも使える！

aspect-ratio は iframeやvideoタグにも使えます！

YouTube動画をレスポンシブで表示したいとき、これだけでOK

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

もうpadding-topで16:9を計算したり、position:absoluteで埋め込む必要なし。
シンプルで読みやすく、保守もラク！

実際の使用例

<div class="thumbnail">
  <img src="sample.jpg" alt="画像">
</div>

.thumbnail img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}

このコードだけで、どんな画像も3:2の比率でトリミングして表示されます。

対応ブラウザは？

主要ブラウザ（Chrome / Firefox / Safari / Edge）はすべて対応済みです◎
IEは非対応ですが、今はもう気にしないでいい場面も多いですよね。

まとめ

aspect-ratioは、CSSだけで美しい比率をキープできる超便利プロパティ。
レスポンシブ対応や画像・動画周りのトラブルをグッと減らしてくれます。

• 比率を明確に保ちたい → aspect-ratio！
• 高さの指定に悩んでた → aspect-ratioで解決！
• 複雑なコードをシンプルにしたい → aspect-ratio一択！

どんどん活用して、より美しく整ったレイアウトを目指しましょう✨

今後も、CSSで使える便利なテクニックやデザインTipsを紹介していきます。
良かったらまたチェックしてみてくださいね！

では〜👋

この記事を読んだ人はこの記事も見てます！

mellowlife

【CSS備忘録】マウスホバーで画像がちょっと拡大する CSS| mellowlife サイト制作を始めて1年半、html、cssが身についてきた今日この頃です。さまざまな方から伝授してもらい自分なりに作ったcssは可愛いものです。 今回ご紹介するのは、画像を…