ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してアスペクト比を実現する方法
実装方法: 1.padding属性と「%」単位を使用する; 2.padding属性とcalc()属性を使用する; 3.padding属性とCSS変数を使用する; 4.padding属性と「%」単位を使用する疑似要素; 5. ウィンドウ ユニット「vw」を直接使用する; 6. CSS グリッド レイアウトでウィンドウ ユニットを使用する。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
アスペクト比は、映画やテレビ制作では アスペクト比とも呼ばれます。ビデオの幅を高さで割った値。通常は x:y
または x×y
で表されます。コロンとバツは中国語の「比較」を意味します。現在、映画業界で最も一般的に使用されている比率はアナモルフィック比率 (つまり、2.39:1
) です。従来の 4:3
は現在でも多くのテレビ画面で使用されており、その後継仕様である 16:9
は高解像度テレビやデジタル テレビで使用されています。一般的な比率:
アスペクト比の詳細については、Wiki のアスペクト比の記事を参照してください。
CSS を使用してコンテナのアスペクト比を実装します。一般的な HTML テンプレート構造は 2 つあります:
<div class="aspectration" data-ratio="16:9"> <div class="content"></div> </div>
もう 1 つは、構造は次のとおりです。
<div class="aspectration" data-ratio="16:9"> </div>
具体的に使用する場合、独自の使用シナリオに応じてさまざまな構造が採用されます。
前述したように、CSS を使用してアスペクト比を実現する方法は数多くありますが、これらのスキームの簡単なリストを次に示します。ただし、コードは非常にシンプルであり、コードを一目見れば原理が理解できるため、それぞれのソリューションについては詳しくは紹介しません。
これは、提案された最も初期の実装ソリューションの 1 つです。主な原則は、padding-top
または padding-bottom
Percentage を使用することです。コンテナのアスペクト比を達成するための値。 CSS では、padding-top
または padding-bottom
のパーセンテージ値は、コンテナの width
に基づいて計算されます。このようにして、コンテナのアスペクト比が適切に達成されます。この方法を使用するには、コンテナの height
を 0
に設定する必要があります。コンテナコンテンツのすべての要素は position:absolute
を採用する必要があります。そうしないと、サブ要素のコンテンツがコンテナから padding
に押し出されます (コンテンツがオーバーフローする原因になります)。
たとえば、コンテナのアスペクト比は 16:9
であり、計算によれば: 100% * 9 / 16
を取得できます。 56.25%
。 4:3
が必要な場合、対応する値は 100% * 3 / 4
です。
具体的な CSS コードは次のとおりです。
.aspectration { position: relative; /*因为容器所有子元素需要绝对定位*/ height: 0; /*容器高度是由padding来控制,盒模型原理告诉你一切*/ width: 100%; } .aspectration[data-ratio="16:9"] { padding-top: 56.25%; } .aspectration[data-ratio="4:3"]{ padding-top: 75%; }
ワイルドカード文字 *
セレクターを使用して、子要素の幅と高さをコンテナ ## と同じにします。 #.aspectration :
.aspectration > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }padding & calc()このソリューションでは、
padding と
calc() を一緒に使用します。実際、原理は最初の解決策と同じです。最初の解決策では、毎回
padding の値を計算する必要があるというだけです。
calc() を使用すると、次の関数を通じて
padding## を直接計算できます。ブラウザ #パーセンテージ値。 <pre class="brush:css;toolbar:false;">.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}</pre>
パディングと CSS 変数
原則に基づいていますが、CSS 変数機能を使用して前のソリューションをより柔軟にしています。 CSS 変数を使用する場合、HTML から data-ratio
を削除できます。これを style="--aspect-ratio:16/9"
または style="--aspect-ratio:1.4;"
に置き換えます。同時に、2 番目のソリューションで calc()
を使用することもできます。 CSS 変数と calc()
関数の組み合わせは完璧な組み合わせだからです。 <pre class="brush:css;toolbar:false;">.aspectration[style*="--aspect-ratio"] {
padding-top: calc(100% / (var(--aspect-ratio)));
}</pre>
padding & pseudo-element
要素の padding
値を使用します。ただし、CSS では、CSS 疑似要素 ::before
または ::after
を使用してコンテナーを開くこともできます。 <pre class="brush:css;toolbar:false;">.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}</pre>
ウィンドウ単位
が提供されます。この単元について学習した生徒は、browser100vw
がブラウザのウィンドウ幅 (ビューポート) を表すことを知っています。たとえば、ブラウザが 1334px
の場合、100vw = 1334px
となります。このとき、1vw = 13.34px
を意味します。ここの 100vw
は、前のソリューションの 100%
にも対応します。このようにして、前の %
ユニットを vw
ユニットに置き換えることができます。たとえば、16:9
は 100vw * 9 / 16 = 56.25vw
に対応します。この値は、padding-top
または padding-bottom
で使用できます。ただし、ここで示しているのは padding
ではなく、この値を height
に与えることです。 <pre class="brush:css;toolbar:false;">.aspectration[data-ratio="16:9"] {
width: 100vw;
height: 56.25vw;
}</pre><p>上面的示例中<code>width
的值是30vw
,那么对应的height
值就是30vw * 9 / 16 = 16.875vw
。
这是一个很有创意的解决方案,使用的都是CSS新特性:视窗单位和CSS Grid Layout。简单说一下其中的实现原理:将容器.aspectration
通过display:grid
声明为一个网格容器,并且利用repeat()
将容器划分为横向比例,比如16
,那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw
。同样使用grid-auto-rows
,将其设置的值和横向的值一样。在子元素上通过grid-column
和grid-row
按比例合并单元格。
.aspectration { display: grid; grid-template-columns: repeat(16, 6.25vw); grid-auto-rows: 6.25vw; } .aspectration[data-ratio="16:9"] .content { grid-column: span 16; grid-row: span 9; }
(学习视频分享:css视频教程)
以上がCSSを使用してアスペクト比を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。