Home >Web Front-end >CSS Tutorial >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 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.
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.
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.
This is one of the earliest implementation solutions proposed. The main principle is to use padding-top
or padding-bottom
Percentage 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%; }
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 variablesFor 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-elementThe 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 unitThe new CSS features provide a new unit
vw. Students who have learned about this unit know that browser
100vw 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新特性:视窗单位和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!