方法-アスペクト比
CSSを使用して要素のアスペクト比を維持する方法を学びます。
アスペクト比
サイズ変更時にアスペクト比(4:3、16:9など)を維持する柔軟な要素を作成します。
アスペクト比とは何ですか?
要素のアスペクト比は、要素の幅と高さの比例関係を表します。2つの一般的なビデオアスペクト比は、4:3(20世紀のユニバーサルビデオフォーマット)と16:9(HDテレビとヨーロッパのデジタルテレビではユニバーサル、YouTubeビデオではデフォルト)です。
方法-高さが幅に等しい
ステップ1)HTMLを追加します。
<div>などのコンテナ要素を使用し、その中にテキストが必要な場合は、子要素を追加します。
例
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
ステップ2)CSSを追加します。
のパーセンテージ値を追加してpadding-top
、DIVのアスペクト比を維持します。次の例では、1:1のアスペクト比を作成します(高さと幅は常に同じです)。
例1:1のアスペクト比
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
その他のアスペクト比:
例16:9アスペクト比
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
例4:3アスペクト比
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
例3:2アスペクト比
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
例8:5アスペクト比
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}