CSS를 사용하여 종횡비를 얻는 방법

구현 방법: 1. 패딩 속성과 "%" 단위를 사용합니다. 2. 패딩 속성과 CSS 변수를 사용합니다. 4. 패딩 속성과 의사 요소를 사용합니다. 6. CSS 그리드 레이아웃과 함께 창 단위를 사용합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

종횡비 스토리

종횡비는 영화 및 TV 제작에서 종횡비라고도 하며, 이는 비디오의 너비를 높이로 나눈 비율을 의미하며 일반적으로 x로 표시됩니다. y 또는 x×y, 콜론과 십자 표시는 중국어로 '비율'을 의미합니다. 현재 영화 산업에서 가장 일반적으로 사용되는 비율은 아나모픽 비율(예: 2.39:1)입니다. 전통적인 4:3은 오늘날에도 여전히 많은 TV 화면에서 사용되고 있으며 성공적인 후속 사양인 16:9는 HD TV 또는 디지털 TV 고급 사양에 사용됩니다. 일반적인 비율: 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

🎜🎜🎜길이 및 너비 정보 더 자세한 소개는 Wiki의 Aspect ration 기사를 참조하세요. 🎜🎜🎜🎜HTML 구조🎜🎜🎜CSS를 사용하여 컨테이너 종횡비 구현 두 가지 일반적인 HTML 템플릿 구조가 있습니다: 🎜

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

🎜다른 구조는: 🎜

.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를 사용하여 종횡비를 달성하는 방법은 다양합니다. 다음은 이러한 솔루션의 간략한 목록입니다. 다만, 코드가 매우 간단하고, 코드를 보면 한눈에 원리를 이해할 수 있기 때문에 각 솔루션에 대해 자세히 소개하지는 않겠습니다. 🎜

세로 패딩

🎜이것은 제안된 최초의 구현 솔루션입니다. 주요 원칙은 padding-top 또는 padding-bottom을 사용하는 것입니다. 컨테이너 종횡비를 달성합니다. CSS에서 padding-top 또는 padding-bottom의 백분율 값은 컨테이너의 너비를 기준으로 계산됩니다. 이런 방식으로 컨테이너의 종횡비가 잘 구현됩니다. 이 방법을 사용하려면 컨테이너의 높이를 0으로 설정해야 합니다. 컨테이너 콘텐츠의 모든 요소는 position:absolute를 사용해야 합니다. 그렇지 않으면 하위 요소의 콘텐츠가 padding에 의해 컨테이너 밖으로 압착됩니다(콘텐츠 오버플로 발생). . 🎜🎜예를 들어 컨테이너의 가로 세로 비율이 16:9인 경우 계산에 따르면 100% * 9/16을 얻을 수 있습니다. 56.25 %. 4:3을 원할 경우 해당 값은 100% * 3/4입니다. 🎜🎜특정 CSS 코드는 다음과 같습니다. 🎜rrreee🎜와일드카드 * 선택기를 사용하여 하위 요소의 너비와 높이를 컨테이너 .aspectration과 동일하게 만듭니다. 🎜rrreee

padding & calc()

🎜이 솔루션에서는 padding과 calc()를 함께 사용합니다. 사실 원리는 첫 번째 해결 방법과 동일합니다. 하지만 첫 번째 해결 방법에서는 매번 padding 값을 계산해야 합니다. calc()를 사용하면 padding을 직접 계산할 수 있습니다. browser.의 백분율 값입니다. 🎜rrreee

패딩 및 CSS 변수

🎜변수의 경우 예전에는 다른 계산기 언어 및 CSS 프로세서의 기능이었지만 언급할 가치가 있는 것은 이제 CSS의 기능이기도 한다는 것입니다. 다음 솔루션도 padding 원칙을 기반으로 하지만 CSS 변수 기능을 사용하여 이전 솔루션을 더욱 유연하게 만듭니다. CSS 변수를 사용할 때 HTML에서 데이터 비율을 제거할 수 있습니다. style="--aspect-ratio:16/9" 또는 style="--aspect-ratio:1.4;"로 바꾸세요. 동시에 두 번째 해결 방법에서 calc()를 사용할 수도 있습니다. CSS 변수와 calc() 함수의 조합은 완벽한 조합이기 때문입니다. 🎜rrreee

패딩 및 의사 요소

🎜이전 솔루션은 모두 .aspectration 요소에 padding 값을 사용했습니다. 그러나 CSS에서는 CSS 의사 요소 ::before 또는 ::after를 사용하여 컨테이너를 열 수도 있습니다. 🎜rrreee

창 단위

🎜새로운 CSS 기능은 새로운 단위 vw를 제공합니다. 이 단원에 대해 배운 학생들은 브라우저 100vw가 브라우저의 창 너비(뷰포트)를 나타낸다는 것을 알고 있습니다. 예를 들어, 브라우저가 1334px인 경우 100vw = 1334px가 정확합니다. 이때 1vw = 13.34px를 의미합니다. 여기서 100vw는 이전 솔루션의 100%에도 해당합니다. 이런 식으로 이전 % 단위를 vw 단위로 바꿀 수 있습니다. 예를 들어, 16:9는 100vw * 9 / 16 = 56.25vw에 해당합니다. 이 값은 padding-top 또는 padding-bottom에서 사용할 수 있습니다. 하지만 여기서 시연되는 것은 더 이상 padding이 아니라 이 값을 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视频教程）

위 내용은 CSS를 사용하여 종횡비를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!