【CSS】aspect-ratioの使い方を解説！比率を保ったまま拡大・縮小できて便利
コードのこと
比率を保ったまま拡大・縮小したい…！
600px × 600pxなど、固定サイズで正方形にすればいいのであれば楽なのですが、時代はレスポンシブ。
「画面幅に合わせて比率を保ったまま拡大したい・縮小したい」そんな望み、ありますよね。
そんな時にとっても便利なCSSプロパティ、aspect-ratioについてお話しします。画像や動画のサイズを変えても、きれいな比率を保つことができるので、ぜひ覚えてみてくださいね！
aspect-ratioとは？
aspect-ratioって何？と思う方もいるかもしれませんね。簡単に言うと、幅と高さの比率を指定するプロパティです。たとえば、16:9とか4:3って聞いたことありますよね？それをCSSで簡単に指定できちゃうんです。
.element {
aspect-ratio: 16 / 9;
}このコードを使えば、要素がどんなに大きくなったり小さくなったりしても、指定した比率は変わりません。とっても便利ですよね！
aspect-ratioの基本的な使い方
まずは、基本的な使い方を見てみましょう。基本構文はとてもシンプルです。
/* 16:9の比率を指定 */
.element {
aspect-ratio: 16 / 9;
}
/* 4:3の比率を指定 */
.element {
aspect-ratio: 4 / 3;
}
/* 1:1の比率を指定 ※正方形 */
.element {
aspect-ratio: 1 / 1;
}これだけで、指定した比率で要素が描画されます。とっても簡単ですよね！
実際の使用例
次に、実際にどのように使うかを見てみましょう。画像や動画、その他のコンテナ要素にaspect-ratioを適用する具体例をご紹介します。
画像に適用する場合
<style>
.image-container {
width: 100%;
aspect-ratio: 16 / 9; /* 16:9の比率に */
overflow: hidden; /* はみ出たところを非表示 */
}
.image-container img {
width: 100%; /* 親要素の横幅まで広げる */
height: 100%; /* 親要素の縦幅まで広げる */
object-fit: cover; /* 親要素のサイズをカバーする表示 */
}
</style>
<div class="image-container">
<img src="example.jpg" alt="Example Image">
</div>↓上のコードの実際の表示
動画に適用する場合
<style>
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container iframe {
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
</div>ブラウザ対応状況
aspect-ratioプロパティは、最新のブラウザでほとんどサポートされていますが、一部の古いブラウザではまだ対応していないこともあります。最新の対応状況は、以下のリンクから確認できます。
※2024/6/1現在：Chrome,Firefox,EdgemOpera,Safariなど主要ブラウザで対応しています。
まとめ
aspect-ratioプロパティを使えば、画像や動画などの要素の比率を保ちながらサイズを調整することができ、とても便利です。ぜひ、実際に使ってみて、その便利さを実感してくださいね！
