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

2023年8月17日2023年10月22日

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

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

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

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

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

＼　結論！　／

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

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

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

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

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

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

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

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

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

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

aspect-ratio: 1;

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

aspect-ratio: 601 / 460;

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

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

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

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

よかったらシェアしてね！