【CSS】aspect-ratioが効かないとき

コーディングで画像を表示させる際、必ず指定すべきアスペクト比(縦横比)。

レスポンシブで画面幅を広げても縮めても崩れない、基本的な指定方法です。

aspect-ratioが登場する前は、padding-topで縦横比を保つやり方が主流だったと思います。
記述量も多かったので、今は本当に楽になりました。

この記事では、私が普段 “画像にはもはやこれしか使っていない”プロパティ【aspect-ratio】について解説します。

スポンサーリンク
目次

aspect-ratioが効かない?そんなときは

\ 結論! /

img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;  /* この比率を変えるだけ */
  object-fit: cover;
}

基本はこれだけ、これだけ覚えれば良いです。

htmlの <img>要素 に対してつけてあげます。これでアスペクト比率は保たれます

画像自体の横幅サイズは、その<img>要素を囲っている親要素のwidthにて指定しましょう。

横幅を指定すれば、縦幅は縦横比に従って変わってくれます。

aspect-ratio・デモ

↓↓右側の『EDIT ON CODEPEN』を押すとコードペンを開けます

See the Pen aspect-ratioの指定あり・画像の縦横比 by puchi-code (@puchi-code) on CodePen.

※aspect-ratioの指定をしないとこのようになる、サイズがバラバラの画像を敢えて使用しています

スポンサーリンク

aspect-ratioが効かないとき・値の書き方いろいろ

比率だけでなく、pxでの書き方などもありますので参考にしてください。

aspect-ratioの値は、width(横幅) / height(縦幅)で書きます

正方形

正方形の場合は1/1ですが、この場合は『1』でOKです。

aspect-ratio: 1;

デザインカンプの値を指定する

デザインカンプで下記のような値になっていた場合は、そのまま width / height で書いてください。

aspect-ratio: 601 / 460;

iframeの書き方は?

Googleマップの埋め込み、YouTube動画の埋め込み時は、iframeに対して下記を指定してください。

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

↓↓右側の『EDIT ON CODEPEN』を押すとコードペンを開けます

See the Pen aspect-ratio・Googleマップ埋め込み by puchi-code (@puchi-code) on CodePen.

aspect-ratioが効かないとき・まとめ

記事のポイントをまとめます

  • aspect-ratioは<img>タグに対して指定する
  • 画像の横幅の指定は<img>タグを覆う親要素に対して行う
  • 値の書き方は、width(横幅) / height(縦幅)
  • 地図やYouTube埋め込みの場合は<iframe> に対して指定する
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次