So erreichen Sie ein Seitenverhältnis mithilfe von CSS

Implementierungsmethode: 1. Füllattribute und „%“-Einheiten verwenden; 3. Füllattribute und CSS-Variablen verwenden; 5. Fenstereinheiten direkt verwenden; „vw“; 6. Verwenden Sie Fenstereinheiten mit CSS-Grid-Layout.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Seitenverhältnis-Story

Das Seitenverhältnis wird in der Film- und Fernsehproduktion auch Seitenverhältnis genannt und bezieht sich auf das Verhältnis der Breite eines Videos geteilt durch seine Höhe, normalerweise ausgedrückt als x: y oder x×y, der Doppelpunkt und das Kreuz darin bedeuten auf Chinesisch „Verhältnis“. Das derzeit in der Filmindustrie am häufigsten verwendete Verhältnis ist das anamorphotische Verhältnis (d. h. 2,39:1). Das traditionelle 4:3 wird auch heute noch in vielen Fernsehbildschirmen verwendet, und seine erfolgreiche Nachfolgespezifikation 16:9 wird im hochauflösenden Fernsehen oder im digitalen Fernsehen höher eingesetzt. Gängige Proportionen: x:y或x×y，其中的冒号和叉号表示中文的“比”之意。目前，在电影工业中最常被使用的是anamorphic比例（即2.39:1）。传统的4:3仍然被使用于现今的许多电视画面上，而它成功的后继规格16:9则被用于高清晰度电视或数字电视上。常见的比例：

有关于长宽比更多的介绍可以阅读Wiki上的Aspect ration一文。

HTML结构

使用CSS实现容器长宽比，常见的HTML模板结构有两种：

<div class="aspectration" data-ratio="16:9">
    <div class="content"></div>
</div>

另外一种结构是：

<div class="aspectration" data-ratio="16:9">
</div>

具体使用的时候，根据自己使用场景采用不同的结构。

CSS实现长宽比例方案

前面也提到过了，使用CSS实现长宽比方案有多种，下面简单的罗列一下这些方案。不过每种方案都不会详细介绍，因为代码非常简单，看一眼代码就能明白其中原理。

垂直方向的padding

这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在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的百分比值。

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

padding & CSS变量

对于变量而言，以前是其他计算器语言和CSS处理器的特性，不过值得特性的是，现在也是CSS的特性。接下来的这个方案也是基于padding原理，只不过是借助于CSS变量特性，让前面的方案变得更为灵活一些。使用CSS的变量时，可以把HTML中data-ratio去掉了。换成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同时也可以借助于第二个方案中的calc()。因为CSS的变量和calc()函数的结合是一种完美的结合。

.aspectration[style*="--aspect-ratio"] {
    padding-top: calc(100% / (var(--aspect-ratio)));
}

padding & 伪元素

前面的方案都是在.aspectration元素上使用padding值。但在CSS中，还可以使用CSS的伪元素::before或::after来撑开容器。

.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;
}

视窗单位

CSS新特性中提供了一种新的单位vw。了解过这个单位的同学都知道，浏览器100vw表示的就是浏览器的视窗宽度(Viewport)。打个比方说，如果你的浏览器是1334px，那么对就的100vw = 1334px。这个时候也就是说1vw = 13.34px。这里的100vw也对应前面方案中的100%。这样我们就可以把前面的%单位换成vw的单位。打个比方说，16:9对应的就是100vw * 9 / 16 = 56.25vw。这个值可以用在padding-top或者padding-bottom中。但这里演示的不再是padding了，而是把这个值给height

🎜🎜🎜Über Länge und Breite Für Eine ausführlichere Einführung finden Sie im Artikel zur Aspektration im Wiki. 🎜🎜🎜🎜HTML-Struktur🎜🎜🎜Verwenden Sie CSS, um das Container-Seitenverhältnis zu implementieren. Es gibt zwei gängige HTML-Vorlagenstrukturen: 🎜

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
}

🎜Die andere Struktur ist: 🎜

.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;
}

🎜Wenn Sie sie speziell verwenden, verwenden Sie je nach Verwendungsszenario unterschiedliche Struktur. 🎜🎜CSS-Seitenverhältnis-Lösung🎜🎜Wie bereits erwähnt, gibt es viele Möglichkeiten, CSS zu verwenden, um ein Seitenverhältnis zu erreichen. Hier ist eine kurze Liste dieser Lösungen. Allerdings wird nicht jede Lösung im Detail vorgestellt, da der Code sehr einfach ist und Sie das Prinzip auf einen Blick verstehen können. 🎜

Vertikale Polsterung

🎜Dies ist die früheste vorgeschlagene Implementierungslösung. Das Hauptprinzip besteht darin, padding-top oder padding-bottom zu verwenden Erreichen Sie das Container-Seitenverhältnis. In CSS wird der Prozentwert von padding-top oder padding-bottom basierend auf der width des Containers berechnet. Auf diese Weise wird das Seitenverhältnis des Behälters gut realisiert. Bei dieser Methode müssen Sie die Höhe des Containers auf 0 setzen. Alle Elemente des Containerinhalts müssen position:absolute verwenden, andernfalls wird der Inhalt der Unterelemente durch padding aus dem Container verdrängt (was zum Überlaufen des Inhalts führt). . 🎜🎜Wenn zum Beispiel das Seitenverhältnis unseres Containers 16:9 ist, dann können wir gemäß der Berechnung: 100 % * 9 / 16 56,25 erhalten %. Wenn Sie 4:3 wünschen, dann ist der entsprechende Wert 100 % * 3 / 4. 🎜🎜Der spezifische CSS-Code lautet wie folgt: 🎜rrreee🎜Verwenden Sie den Wildcard-Selektor *, um die Breite und Höhe seiner untergeordneten Elemente mit dem Container .aspectration gleichzusetzen: 🎜rrreee

padding & calc()

🎜Diese Lösung verwendet padding und calc() zur gemeinsamen Verwendung. Tatsächlich ist das Prinzip dasselbe wie bei der ersten Lösung. Bei der ersten Lösung müssen wir jedoch jedes Mal den Wert von padding berechnen. Wenn wir calc() verwenden, können wir den padding direkt über berechnen Prozentwert des Browsers. 🎜rrreee<h3>Padding & CSS-Variablen</h3>🎜Variablen waren früher Features anderer Taschenrechnersprachen und CSS-Prozessoren, aber was erwähnenswert ist, ist, dass sie jetzt auch Features von CSS sind. Die nächste Lösung basiert ebenfalls auf dem <code>padding-Prinzip, nutzt jedoch die CSS-Variablenfunktion, um die vorherige Lösung flexibler zu machen. Wenn Sie CSS-Variablen verwenden, können Sie data-ratio aus HTML entfernen. Ersetzen Sie es durch style="--aspect-ratio:16/9" oder style="--aspect-ratio:1.4;". Gleichzeitig können Sie calc() auch in der zweiten Lösung verwenden. Denn die Kombination aus CSS-Variablen und der Funktion calc() ist eine perfekte Kombination. 🎜rrreee

padding & pseudo-element

🎜Die vorherigen Lösungen verwenden alle den padding-Wert für das .aspectration-Element. Aber in CSS können Sie auch das CSS-Pseudoelement ::before oder ::after verwenden, um den Container zu öffnen. 🎜rrreee

Fenstereinheit

🎜Neue CSS-Funktionen bieten eine neue Einheit vw. Schüler, die diese Einheit kennengelernt haben, wissen, dass der Browser 100vw die Fensterbreite (Viewport) des Browsers darstellt. Wenn Ihr Browser beispielsweise 1334px ist, dann ist 100vw = 1334px richtig. Zu diesem Zeitpunkt bedeutet dies 1vw = 13,34px. Der 100vw entspricht hier auch dem 100% in der vorherigen Lösung. Auf diese Weise können wir die bisherige Einheit % durch die Einheit von vw ersetzen. Beispielsweise entspricht 16:9 100vw * 9 / 16 = 56,25vw. Dieser Wert kann in padding-top oder padding-bottom verwendet werden. Was hier jedoch demonstriert wird, ist nicht mehr das padding, sondern das Zuweisen dieses Werts zu height. 🎜

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
}

上面的示例中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视频教程）

Das obige ist der detaillierte Inhalt vonSo erreichen Sie ein Seitenverhältnis mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!