コーディングで画像を表示させる際、必ず指定すべきアスペクト比(縦横比)。
レスポンシブで画面幅を広げても縮めても崩れない、基本的な指定方法です。
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> に対して指定する