CSS aspect-ratioの使い方。効かないときはどうする？ / メモ / いがわ

CSS aspect-ratioの使い方。効かないときはどうする？

2023.01.24 2023.01.31更新。

Contents - 目次

1 CSSで縦横比の指定。aspect-ratioの使い方。
2 aspect ratio（アスペクト比）について。
3 aspect-ratioの記述例。
4 aspect-ratioが効かないとき。
5 CSS 関連メモ。

CSSで縦横比の指定。aspect-ratioの使い方。

aspect-ratioプロパティ。

aspect-ratio

aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比（アスペクト比）の指定がCSSでできるようになった。

ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYouTubeなどのアスペクト比の固定がとても便利。

CSSでの指定例。

aspect-ratio: ○ / ○;

CSSでの指定方法は、「aspect-ratio: 横の比率 / 縦の比率」となり、

正方形にしたい場合は、「aspect-ratio: 1 / 1;」、もしくは「aspect-ratio: 1;」
黄金比にしたい場合は、「aspect-ratio: 8 / 5;」
一般的なワイド画面の比率にしたい場合は、「aspect-ratio: 16 / 9;」

などとなる。

aspect ratio（アスペクト比）について。

CSSのaspect-ratioプロパティ。

アスペクト比の例。

アスペクト比は、略してアス比、日本語では縦横比とも呼ばれる。

現代社会で日常的に使われるモニターや用紙、古代の建築物にも使用されている。

代表的なアスペクト比としては…

かつてのアナログテレビやiPhoneのカメラは、「４:３」が多い。
デジタル一眼レフカメラは、「3：2」が多い。
デジタルテレビやパソコンやYouTubeは、「16：9」が多い。
黄金比は、「約5：8」（1：1.618…）。
白銀比は、「約5：7」（1：1.141…）。

などがある。

補足。黄金比と白銀比。

黄金比：世界的に美しいとされ、建築物や絵画、彫刻、自然界にも多く存在する。
白銀比：日本古来から美しい比率とされ大和比とも呼ばれる。現代でもA4紙など、A版サイズで使用されている。

aspect-ratioの例。黄金比。

※このにゃんちゃんの画像のアスペクト比は「黄金比」。（aspect-ratio: 8 / 5;）

aspect-ratioの記述例。

画像（img要素）の一覧表示。

Flexboxとの組み合わせ。

Flexboxで、高さがバラバラの画像が並べられている。

（※スクショはダークモード表示時のもの。）

例）

aspect-ratioの使い方の例。

img要素を、正方形にしたい場合。

アスペクト比を１：１にすれば良い。

CSS

img {
 aspect-ratio: 1 / 1;
}

または、

img {
 width: 100%;
 height: 100%;
 aspect-ratio: 1 / 1;
}

実際の表示（スクショ）

aspect-ratioの使い方の例。

元画像がバラバラのアスペクト比なので、縦や横に伸びたり縮んだりする。

正円にしたい場合。

border-radius: 50%;を加えれば良い。

例）

CSS

img {
 width: 100%;
 height: 100%;
 aspect-ratio: 1 / 1;
 border-radius: 50%;
}

実際の表示（スクショ）

aspect-ratioの使い方の例。

同じく伸び縮みするが、これはこれでアリな気もする。惜しい感じ。

Google MapやYouTubeのiframe要素を、正方形や正円にする場合。

iframeのwidthやheightの値。

Google MapやYouTubeなどのiframe要素の場合は、埋め込みコードにwidthやheightの値が指定されていることがある。

なので、それを上書きするためにも、幅と高さを一緒に指定すると良い。（基本的にimg要素と同様。）

例）

CSS

iframe {
 width: 100%;
 width: 100%;
 aspect-ratio: 1 / 1;
}

または、

iframe {
 width: 50%;
 height: 50%;
 aspect-ratio: 1;
}

など。

Google Mapのiframe要素を、正方形にする場合。

img要素のように、aspect-ratioで指定できる。

img要素と同じく、aspect-ratio: 1 / 1;にすれば良い。

CSS

iframe#map{
 width: 50%;
 aspect-ratio: 1 / 1;
 height: 50%;
 display: block;
 margin: 50px auto;
}

（※「display: block;」と「margin: auto;」は位置の調整のため使用。）

実際の表示例。

YouTubeのiframe要素を、正円にする場合。

img要素のように、border-radiusで指定できる。

img要素と同様に、border-radius: 50%;を加えれば良い。

CSS

iframe#youtube{
 width: 50%;
 aspect-ratio: 1 / 1;
 height: 50%;
 display: block;
 margin: 50px auto;
 border-radius: 50%;
}

（※「display: block;」と「margin: auto;」は位置の調整のため使用。）

実際の表示例。

引用：Harder, Better, Faster, Stronger | Daft Punk | Pomplamoose

高さが揃っていない画像を統一させたい場合。

object-fitプロパティを使用する。

object-fit: cover;を加えれば良い。

例）

CSS

img {
 width: 100%;
 height: auto;
 aspect-ratio: 8 / 5;
 object-fit: cover;
}

実際の表示（スクショ）

黄金比の比率（約5:8）で画像を切り抜き、見た目を揃えた状態。

aspect-ratioの使い方の例。

aspect-ratioを保ったまま、画像の真ん中を中心にトリミングされるので、表示もつぶれない。

aspect-ratioが効かないとき。

aspect-ratioが効かない？

aspect-ratioが効かないときの主なチェック箇所。

aspect-ratioが効かないなぁ、というときは、下記の内容をチェックすると良いかもしれない。

aspect-ratioが効かない原因の例。

「高さ」の指定がされていない。（「height: auto;」などがない。）
親要素に「display: flex;」が指定されている場合は、「height」に「fit-content」や「max-content」を使用する必要がある。
「aspect-ratio」のスペルが違っている。（「aspect-racio」など。）
値の記号が「/」ではなく「:」となっている。（「aspect-ratio: 16:9;」など。）

CSS aspect-ratioの使い方。効かないときはどうする？

※こちらのにゃんちゃんの画像のアスペクト比は「白銀比」。（aspect-ratio: 7 / 5;）

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。