Webページに画像を配置する際、異なるアスペクト比の画像が混在するとレイアウトが崩れたり、見た目が乱れることがあります。この記事では、CSSを使って画像のアスペクト比を統一する方法を解説します。
使用するCSS
まず、次のCSSを適用することで、画像のアスペクト比を統一しつつ、レイアウトを整えることができます。
img {
aspect-ratio: 16 / 9;
object-fit: cover;
}このCSSは、画像のアスペクト比を16:9に統一し、object-fit: cover; を使って画像が要素の領域を完全に埋めるように表示されるようにします。これにより、グリッドレイアウトやサムネイルを連続して表示するようなレイアウトでも、画像のアスペクト比が統一されます。
サンプルコード
以下は、連続して画像を表示するサンプルのHTMLコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像のアスペクト比を統一するデモ</title>
<style>
img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
</style>
</head>
<body>
<div class="image-container">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<img src="image3.jpg" alt="画像3">
</div>
</body>
</html>実装イメージ
上記の画像はそれぞれまったく別の比率ですが、CSSを利用して縦横比を1対1にして、画像は中央寄せにしました。
注意点
この方法は、IE11やiOSの14.8以前など、一部の古いブラウザでは未対応です。しかし、最近のブラウザでは対応しており、古いブラウザを考慮に入れなくても問題ない場合には、この方法を利用することができます。
まとめ
CSSを使って画像のアスペクト比を統一する方法を紹介しました。aspect-ratio と object-fit を組み合わせることで、画像のアスペクト比を統一しつつ、レイアウトを整えることが可能です。ただし、古いブラウザの対応に注意してください。
