CSSのaspect-ratioプロパティを使って、画像や動画などのメディア要素の縦横比（アスペクト比）を一定に保つ方法を紹介します。特にレスポンシブデザインにおいては、メディアクエリ（@media）を使うより簡単 かつ 直感的に実装できるのがポイントです。
aspect-ratioプロパティの基本構文.element {
aspect-ratio: 16 / 9;
}ここでは、elementクラスを持つ要素の縦横比を16:9に設定しています。
この設定により、要素の幅（高さ）が変更されると、それに応じて高さ（横）が自動的に調整されます。
レスポンシブデザイン関連の記事はこちら
【実装例1】レスポンシブな動画要素
レスポンシブなYouTubeの埋め込み動画要素を作成するにあたり、aspect-ratioプロパティを使う／使わないの2パターンを実装しました。ウィンドウ幅のサイズを変えて、挙動を比較してみてください。
aspect-ratioプロパティ なし（高さ固定）
aspect-ratioについて解説しているYoutube動画を引用しました。
この実装では、動画の親要素の高さが固定（300px）されています。
従って、親要素の幅が変わると縦横比が変わってしまいます。
HTML / CSS コード
<div class="video-container">
<iframe src="https://youtu.be/jeaRVM9_HS4?si=UxUmN1yUhYWCoyKj" frameborder="0" allowfullscreen></iframe>
</div>.video-container {
width: 100%;
height: 300px;
max-width: 600px; /* コンテナの最大幅を設定 */
margin: 0 auto; /* コンテナを中央揃え */
overflow: hidden; /* 不要なスクロールバーを防止 */
}
.video-container iframe {
width: 100%;
height: 100%;
}aspect-ratioプロパティ あり（16:9に固定）
aspect-ratioについて解説しているYoutube動画を引用しました。
この実装では、aspect-ratioプロパティで親要素の縦横比を16:9に設定しています。
従って、親要素の幅に合わせて高さが自動調整されます。
HTML / CSS コード
<div class="video-container">
<iframe src="https://youtu.be/jeaRVM9_HS4?si=UxUmN1yUhYWCoyKj" frameborder="0" allowfullscreen></iframe>
</div>.video-container {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 600px; /* コンテナの最大幅を設定 */
margin: 0 auto; /* コンテナを中央揃え */
overflow: hidden; /* 不要なスクロールバーを防止 */
}
.video-container iframe {
width: 100%;
height: 100%;
}【実装例2】縦横比を固定した画像ギャラリー
画像ギャラリーを作成する際にもaspect-ratioプロパティは有用で、異なるサイズの画像でも統一された比率で表示できます。こちらもaspect-ratioプロパティを使う／使わないの2パターンを実装しましたので、ウィンドウ幅のサイズを変えて挙動を比較してみてください。
aspect-ratioプロパティ なし（高さ固定）
この実装では、個々の画像の高さが固定（300px）されています。
従って、画像の幅が変わると縦横比が変わってしまいます。
HTML / CSS コード
<div class="gallery">
<div class="gallery-item"><img src="image1.jpg" alt="Image 1"></div>
<div class="gallery-item"><img src="image2.jpg" alt="Image 2"></div>
<div class="gallery-item"><img src="image3.jpg" alt="Image 3"></div>
</div>.gallery {
display: flex;
gap: 10px;
}
.gallery-item {
flex: 1;
height: 300px;
overflow: hidden;
background-color: #f0f0f0;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}aspect-ratioプロパティ あり（4:3に固定）
この実装では、aspect-ratioプロパティによってギャラリー内の各アイテムが4:3の比率で表示されます。
加えてobject-fit: cover;を使用することで、画像が各要素内に収まるようにしつつ、入りきらなかった部分はトリミングされます。これにより、異なるサイズの画像でも一貫した見た目で表示されます。
HTML / CSS コード
<div class="gallery">
<div class="gallery-item"><img src="image1.jpg" alt="Image 1"></div>
<div class="gallery-item"><img src="image2.jpg" alt="Image 2"></div>
<div class="gallery-item"><img src="image3.jpg" alt="Image 3"></div>
</div>.gallery {
display: flex;
gap: 10px;
}
.gallery-item {
flex: 1;
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: #f0f0f0;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}まとめ
今回は、CSSのaspect-ratioプロパティを使った便利なテクニックを紹介しました。aspect-ratioを使うことで、メディア要素の比率を簡単に管理でき、レスポンシブデザインをより直感的に実現できます。
ぜひ、実際に試してみてください！