
CSS aspect-ratioの使い方。効かないときはどうする?
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSで縦横比の指定。aspect-ratioの使い方。
aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比(アスペクト比)の指定がCSSでできるようになった。
すでに全てのモダンブラウザで実装可能となっている。
ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYouTubeなどのアスペクト比の固定がとても便利。
CSSでの指定例。
CSSでの指定方法は、「aspect-ratio: 横の比率 / 縦の比率」となり、
- 正方形にしたい場合は、「aspect-ratio: 1 / 1;」、もしくは「aspect-ratio: 1;」
- 黄金比にしたい場合は、「aspect-ratio: 8 / 5;」
- 一般的なワイドにしたい場合は、「aspect-ratio: 16 / 9;」
などとなる。
aspect ratio(アスペクト比)について。
アスペクト比の例。
アスペクト比は、略してアス比、日本語では縦横比とも呼ばれる。
要するに、縦と横の比率のこと。
現代社会で日常的に使われるモニターや用紙、古代の建築物にも使用されている。
代表的なアスペクト比としては、、、
- かつてのアナログテレビやiPhoneのカメラは、「4:3」が多い。
- デジタル一眼レフカメラは、「3:2」が多い。
- デジタルテレビやパソコンやYouTubeは、「16:9」が多い。
- 黄金比は、「約5:8」 (1:1.618…)。
- 白銀比は、「約5:7」 (1:1.141…)。
などがある。
補足。黄金比と白銀比。
- 黄金比:世界的に美しいとされ、建築物や絵画、彫刻、自然界にも多く存在する。
- 白銀比:日本古来から美しい比率とされ大和比とも呼ばれる。現代でもA4紙など、A版サイズで使用されている。
※このにゃんちゃんの画像のアスペクト比は「黄金比」。
aspect-ratioの記述例。
Flexboxで、高さがバラバラの画像が並んでいる。
(※スクショですみません。他の画像に影響が出るので。)
例)
img要素を、正方形にする場合。
アスペクト比を1:1にすれば良い。
CSS
img {
aspect-ratio: 1 / 1;
}
または、
img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
実際の表示(スクショ)
(※スクショはダークモード表示時のもの。)
元画像がバラバラのアスペクト比なので、縦や横に伸びたり縮んだりする。
正円にしたい場合。
border-radius: 50%;を加えれば良い。
例)
CSS
img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
実際の表示(スクショ)
同じく伸び縮みするが、これはこれでアリな気もする。惜しい感じ。
Google MapやYouTubeのiframe要素を、正方形や正円にする場合。
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: 1 / 1;にすれば良い。
CSS
iframe#map{
width: 50%;
aspect-ratio: 1 / 1;
height: 50%;
display: block;
margin: auto;
}
※「display: block;」と「margin: auto;」は位置の調整のため使用。
実際の表示例。
YouTubeのiframe要素を、正円にする場合。
img要素と同様に、border-radius: 50%;を加えれば良い。
CSS
iframe#youtube{
width: 50%;
aspect-ratio: 1 / 1;
height: 50%;
display: block;
margin: auto;
border-radius: 50%;
}
※「display: block;」と「margin: auto;」は位置の調整のため使用。
実際の表示例。
引用:Harder, Better, Faster, Stronger | Daft Punk | Pomplamoose
高さが揃っていない画像を統一させたい場合。
object-fit: cover;を加えれば良い。
例)
CSS
img {
width: 100%;
height: auto;
aspect-ratio: 8 / 5;
object-fit: cover;
}
実際の表示(スクショ)
黄金比の比率(約5:8)で画像を切り抜き、見た目を揃えた状態。
aspect-ratioを保ったまま、真ん中を中心にトリミングされるので、画像はつぶれない。
aspect-ratioが効かないとき。
aspect-ratioが効かないなぁ、というときは、下記の内容をチェックすると良いかもしれない。
- 「高さ」の指定がされていない。(「height: auto;」などがない。)
- 「aspect-ratio」のスペルが違っている。(「aspect-racio」など。)
- 値の記号が「/」ではなく「:」となっている。(「aspect-ratio: 16:9;」など。)
※こちらのにゃんちゃんの画像のアスペクト比は「白銀比」。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
免責事項について
- 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
- 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
- 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。