CSS | 要素のアスペクト比（縦横比）を固定する方法
CSSでdivタグなどの要素のアスペクト比率（縦横比率）を横幅を基準に固定したレスポンシブデザインの指定方法です。
heightをvwで指定してアスペクト比を固定する方法
高さ（height）をvwでの指定は、幅（width）デバイスやブラウザの表示領域100％で指定されている要素のアスペクト比（縦横比）を固定するのに有効です。
- 要素の横幅がデバイスやブラウザの表示領域100％である事が前提
- 100vw=デバイスやブラウザの表示領域のpx
- 子要素の高さの影響を受けない
PCなどブラウザのウィンドウ幅を変更可能な端末であれば、以下のサンプルで横幅の伸縮にあわせて縦横比固定で高さが可変される事が確認できると思います。
See the Pen CSS | by yochans (@yochans) on CodePen.
要素の横幅に対する%指定は、親要素の横幅、その指定がなければデバイスの画面幅が基準になっております。
これは高さに対しては無効です。
要素のheightをvｗで指定した場合は、画面幅またはウィンドウの表示領域を参照して高さが決定されます。
vｗは、デバイスまたはブラウザの表示領域の横幅に対して100分割された数値を割り当てます。
横幅600pxのデバイスやブラウザの表示領域の場合、1vwが10vｗは60pxで、100vｗは600pxになります。
この場合、子要素のサイズが要素の高さを超える場合、子要素は要素からはみ出されます。
はみ出した子要素を非表示にするには「overflow: hidden」を指定します。
基本的には、子要素も要素の幅、高さにあわせてレスポンシブに拡縮するように作られている事が前提となります。
※横幅が表示領域100％となっていない場合は、vｗで高さを指定しても縦横比は維持されません
サンプルではフォントサイズにもvwを指定して、デバイスまたはブラウザの表示領域に応じて可変させています。
.container{
width: 100%;
height: 20vw; /* 高さを表示領域の20%にする */
background: #000;
overflow: hidden; /* はみ出した要素を非表示にする */
display: flex; /* 縦横中央揃え（サンプル用） */
justify-content: center; /* 縦横中央揃え（サンプル用） */
align-items: center; /* 縦横中央揃え（サンプル用） */
}
.container p{
font-size: 7vw; /* フォントサイズも可変に */
text-align: center;
color: #FFF;
margin: 0;
}（親要素も含め）横幅にmax-widthが指定されている場合はmax-heightも指定する事で、目的の挙動に近くなるかと思います。
サンプル同様にフォントサイズもvwで指定している場合は、max()やclamp()で可変されるフォントサイズの最大値も指定します。
container{
width: 100%;
max-width: 600px;
height: 20vw; /* 高さを表示領域の20%にする */
max-height: 120px;
background: #000;
}
.container p{
font-size: clamp(1vw, 7vw, 20vw); /* フォントサイズも可変に */
text-align: center;
color: #FFF;
margin: 0;
}padding-topを指定してアスペクト比を固定する方法
高さをpadding-topで指定してアスペクト比を固定する方法です。
- 要素の横幅がデバイスやブラウザの表示領域100％である事が前提
- 100%=デバイスやブラウザの表示領域のpx
- 子要素はposition: absoluteで位置を指定する必要がある
- 子要素の高さの影響を受ける
高さをpadding-topで指定する場合も、%やvwでの指定が有効です。
.container{
position: relative; /* positionの基準点にする */
width: 100%;
padding-top: 20%; /* 高さを表示領域の20%にする */
background: #000;
overflow: hidden; /* はみ出した要素を非表示にする */
display: flex; /* 縦横中央揃え（サンプル用） */
justify-content: center; /* 縦横中央揃え（サンプル用） */
align-items: center; /* 縦横中央揃え（サンプル用） */
}
.container p{
position: absolute; /* 基準点からの位置を指定可能にする */
top: 0;
left: 0;
font-size: 7vw; /* フォントサイズも可変に */
color: #FFF;
margin: 0;
}padding-topそのものは、要素の中の上部余白を指定するものなので、素で記述された子要素は指定した数値より下にしか表示されません。
これを回避する為に子要素はposition: absoluteで位置を指定する必要があります。