aspect-ratioプロパティの説明
CSSのaspect-ratioプロパティは、要素が生成するボックスの推奨アスペクト比を指定します。要素は幅（width）と高さ（height）を持つ二次元の平面で表現されますが、この二つを関連付けて比率を決めることができます。
多くの場合、アスペクト比は画像や動画に対して使われる言葉です。コンテンツの横の寸法と縦の寸法の比率を表します。例えば、ハイビジョンであれば16:9、写真であれば4:3という具合に表記します。
CSSでは、要素が生成したボックスの寸法に対してアスペクト比を指定できます。コンテンツのレイアウトが決まっている箇所などで、内容に関わらず幅と高さの寸法の比率を維持したい場合に役立ちます。
aspect-ratioに指定できる値
auto- 内在的なアスペクト比を持つ置換要素であれば、その値を使用し、それ以外の場合はアスペクト比を指定しません。
<ratio>- 要素の推奨アスペクト比を[
width/height]で表します。heightの値を省略した場合は既定値で1となります。アスペクト比の計算は、box-sizingで指定されたボックスの寸法で行われます。
aspect-ratioの使い方とサンプルコード
aspect-ratioプロパティの構文は以下の通りです。
/* アスペクト比の指定 */
aspect-ratio: 1;
aspect-ratio: 4 / 3;
aspect-ratio: 16 / 9;
/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;
aspect-ratioの実例
それでは実際にaspect-ratioを使った例を見てみましょう。以下の内容は、幅と高さを固定した親要素の中に、寸法を定めていない子要素を配置しています。子要素のアスペクト比を指定していない段階では、ボックスの高さは内容に依存しています。
子要素にaspect-ratioを指定すると、横幅に対する高さの寸法が変わります。これは、widthとheightを敢えて指定していないからで、heightの値を明示すれば、高さを基準とした幅の比率を計算します。
以下の選択項目のaspect-ratio: 0.5;を選んだ場合、幅を基準にした計算では高さが親要素の寸法を超過してはみ出しますが、この選択肢のスタイルにheight: 100%;を追加しているため、幅の寸法が縮むようになっています。
<div class="sample-control">
<select id="js_select">
<option value="" label="選択してください" selected />
<option value="ar-auto" label="aspect-ratio: auto;" />
<option value="ar-1x1" label="aspect-ratio: 1/1;" />
<option value="ar-4x3" label="aspect-ratio: 4/3;" />
<option value="ar-16x9" label="aspect-ratio: 16/9;" />
<option value="ar-05" label="aspect-ratio: 0.5;" />
<option value="ar-15" label="aspect-ratio: 1.5;" />
</select>
</div>
<div class="sample-block" data-mode="0">
<div class="item" id="js_target">
Text contents.<br>
Text contents.<br>
Text contents.<br>
</div>
</div>
<script>
const selectToggle = document.getElementById('js_select');
const target = document.getElementById('js_target');
if (selectToggle) {
selectToggle.addEventListener('change', () => {
const toggleVal = selectToggle.value;
target.className = toggleVal;
});
}
</script>
/* 共通のスタイル */
.sample-block {
max-width: 300px;
height: 300px;
margin-block-start: 1rem;
padding: 3px;
border: 3px solid gray;
}
.sample-block > div {
margin: auto;
background: url(/images/sample_photo_628x370.png) no-repeat;
background-size: cover;
color: #fff;
text-align: center;
}
/* アスペクト比の指定 */
.sample-block .ar-auto {
aspect-ratio: auto;
}
.sample-block .ar-1x1 {
aspect-ratio: 1/1;
}
.sample-block .ar-4x3 {
aspect-ratio: 4/3;
}
.sample-block .ar-16x9 {
aspect-ratio: 16/9;
}
.sample-block .ar-05 {
aspect-ratio: 0.5;
height: 100%;
}
.sample-block .ar-15 {
aspect-ratio: 1.5;
}