CSSを使用してアスペクト比を実現する方法-CSSチュートリアル-php.cn

CSSを使用してアスペクト比を実現する方法

青灯夜游

リリース： 2021-06-08 14:10:13

オリジナル

4875 人が閲覧しました

実装方法: 1.padding属性と「%」単位を使用する; 2.padding属性とcalc()属性を使用する; 3.padding属性とCSS変数を使用する; 4.padding属性と「%」単位を使用する疑似要素; 5. ウィンドウユニット「vw」を直接使用する; 6. CSS グリッドレイアウトでウィンドウユニットを使用する。

CSSを使用してアスペクト比を実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

アスペクト比の話

アスペクト比は、映画やテレビ制作では アスペクト比とも呼ばれます。ビデオの幅を高さで割った値。通常は x:y または x×y で表されます。コロンとバツは中国語の「比較」を意味します。現在、映画業界で最も一般的に使用されている比率はアナモルフィック比率 (つまり、2.39:1) です。従来の 4:3 は現在でも多くのテレビ画面で使用されており、その後継仕様である 16:9 は高解像度テレビやデジタルテレビで使用されています。一般的な比率:

アスペクト比の詳細については、Wiki のアスペクト比の記事を参照してください。

HTML 構造

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 アスペクト比スキーム

前述したように、CSS を使用してアスペクト比を実現する方法は数多くありますが、これらのスキームの簡単なリストを次に示します。ただし、コードは非常にシンプルであり、コードを一目見れば原理が理解できるため、それぞれのソリューションについては詳しくは紹介しません。

垂直パディング

これは、提案された最も初期の実装ソリューションの 1 つです。主な原則は、padding-top または padding-bottomPercentage を使用することです。コンテナのアスペクト比を達成するための値。 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## を直接計算できます。ブラウザ #パーセンテージ値。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.aspectration[data-ratio="16:9"] { padding-top: calc(100% * 9 / 16); }</pre><div class="contentsignin">ログイン後にコピー</div></div>パディングと CSS 変数

変数については、以前は他の電卓言語や CSS プロセッサの機能でしたが、注目に値するのは、現在では CSS プロセッサの機能でもあることです。 CSS。次のソリューションも

padding

原則に基づいていますが、CSS 変数機能を使用して前のソリューションをより柔軟にしています。 CSS 変数を使用する場合、HTML から data-ratio を削除できます。これを style="--aspect-ratio:16/9" または style="--aspect-ratio:1.4;" に置き換えます。同時に、2 番目のソリューションで calc() を使用することもできます。 CSS 変数と calc() 関数の組み合わせは完璧な組み合わせだからです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.aspectration[style*="--aspect-ratio"] { padding-top: calc(100% / (var(--aspect-ratio))); }</pre><div class="contentsignin">ログイン後にコピー</div></div>padding & pseudo-element

前述のソリューションはすべて、

.aspectration

要素の padding 値を使用します。ただし、CSS では、CSS 疑似要素 ::before または ::after を使用してコンテナーを開くこともできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>ウィンドウ単位

新しい CSS 機能により、新しい単位

が提供されます。この単元について学習した生徒は、browser100vw がブラウザのウィンドウ幅 (ビューポート) を表すことを知っています。たとえば、ブラウザが 1334px の場合、100vw = 1334px となります。このとき、1vw = 13.34px を意味します。ここの 100vw は、前のソリューションの 100% にも対応します。このようにして、前の % ユニットを vw ユニットに置き換えることができます。たとえば、16:9 は 100vw * 9 / 16 = 56.25vw に対応します。この値は、padding-top または padding-bottom で使用できます。ただし、ここで示しているのは padding ではなく、この値を height に与えることです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.aspectration[data-ratio="16:9"] { width: 100vw; height: 56.25vw; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>上面的示例中<code>width的值是30vw,那么对应的height值就是30vw * 9 / 16 = 16.875vw。

视窗单位 & CSS Grid

这是一个很有创意的解决方案，使用的都是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 サイトの他の関連記事を参照してください。