How to achieve aspect ratio using css

Implementation method: 1. Use the padding attribute and the "%" unit; 2. Use the padding and calc() attributes; 3. Use the padding attribute and CSS variables; 4. Use the padding attribute and pseudo elements; 5. Directly use the window unit "vw"; 6. Use the window unit with CSS Grid layout.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Aspect ratio story

Aspect ratio is also called aspect ratio in film and television production. Refers to the ratio of the width of a video divided by its height, usually expressed as x:y or x×y, where the colon and cross represent the Chinese " It means "comparison". Currently, the most commonly used ratio in the film industry is the anamorphic ratio (i.e. 2.39:1). The traditional 4:3 is still used in many television screens today, and its successful successor specification 16:9 is used in high-definition television or digital television. Common ratios:

For more information about aspect ratio, you can read the Aspect ration article on Wiki.

HTML structure

Use CSS to implement the container aspect ratio. There are two common HTML template structures:

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

The other one The structure is:

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

When used specifically, different structures are adopted according to your own usage scenarios.

CSS Aspect Ratio Scheme

As mentioned before, there are many ways to use CSS to realize the aspect ratio. Here is a brief list of these schemes. However, each solution will not be introduced in detail, because the code is very simple, and you can understand the principle at a glance at the code.

Vertical padding

This is one of the earliest implementation solutions proposed. The main principle is to use padding-top or padding-bottomPercentage value to achieve container aspect ratio. In CSS, the percentage value of padding-top or padding-bottom is calculated based on the width of the container. In this way, the aspect ratio of the container is well achieved. To use this method, you need to set the height of the container to 0. All elements of the container content need to adopt position:absolute, otherwise the content of the sub-elements will be padding squeezed out of the container (causing content to overflow).

For example, the aspect ratio of our container is 16:9, then according to the calculation: 100% * 9 / 16 we can get 56.25% . If you want 4:3, then the corresponding value is 100% * 3 / 4.

The specific CSS code is as follows:

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

Use the wildcard character * selector to make the width and height of its child elements the same as the container .aspectration :

.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

padding & calc()

This solution uses padding and calc() used together. In fact, the principle is the same as the first solution. It’s just that in the first solution, we need to calculate the value of padding every time. If we use calc(), we can directly calculate padding## through the browser. #Percentage value.

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

padding & CSS variables

For variables, it used to be a feature of other calculator languages ​​and CSS processors, but what is worth mentioning is that it is now also a feature of CSS. The next solution is also based on the

padding principle, but it uses the CSS variable feature to make the previous solution more flexible. When using CSS variables, you can remove data-ratio from HTML. Replace it with style="--aspect-ratio:16/9", or style="--aspect-ratio:1.4;". At the same time, you can also use calc() in the second solution. Because the combination of CSS variables and the calc() function is a perfect combination.

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

padding & pseudo-element

The previous solutions all use the

padding value on the .aspectration element. But in CSS, you can also use the CSS pseudo-element ::before or ::after to open the container.

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

Window unit

The new CSS features provide a new unit

vw. Students who have learned about this unit know that browser100vw represents the browser's window width (Viewport). For example, if your browser is 1334px, then 100vw = 1334px. At this time, it means 1vw = 13.34px. The 100vw here also corresponds to the 100% in the previous solution. In this way, we can replace the previous % unit with the vw unit. For example, 16:9 corresponds to 100vw * 9 / 16 = 56.25vw. This value can be used in padding-top or padding-bottom. But what is demonstrated here is no longer padding, but giving this value to 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视频教程）

The above is the detailed content of How to achieve aspect ratio using css. For more information, please follow other related articles on the PHP Chinese website!