CSS保持长宽比

CSS保持长宽比，主要是用于响应式设计的iframe、img、video之类的元素。关于实现长宽比，有以下几种方案：

1. 垂直方向的padding

   主要是利用padding-top或者padding-bottom的百分比来实现容器长宽比。padding的百分比值是根据容器的width来计算的。且容器内所有元素都需要采用position:absolute。

2. padding&calc()

   采用的是padding和calc()配合一起用，与第一种方案相同，采用calc()可以通过浏览器直接计算padding的值。

3. padding&&伪元素

   可以使用CSS的伪元素：：before或：：after来撑开容器。

   html,
body {
height: 100vh;
width: 100vw;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 30vw;
margin: 0 auto;
animation: change 8s linear alternate infinite;
}
.aspectration {
position: relative;
width: 100%;
&::after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
&[data-ratio="16:9"]::after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
@keyframes change {
0% {
width: 30vw;
}
100% {
width: 60vw;
}
}

4. 视图单位&&CSS Grid

   简单说一下其中的实现原理：将容器通过display:grid声明为一个网格容器，并且利用repeat()将容器划分为横向比例，比如16，那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw。同样使用grid-auto-rows，将其设置的值和横向的值一样。在子元素上通过grid-column和grid-row按比例合并单元格。
   html,
body {
height: 100vh;
width: 100vw;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.aspectration {
display: grid;
grid-template-columns: repeat(16, 1.875vw);
grid-auto-rows: 1.875vw;
animation: change 8s linear alternate infinite;
}
.aspectration[data-ratio="16:9"] .content{
grid-column: span 16;
grid-row: span 9;
}
iframe {
width: 100%;
height: 100%;
}
@keyframes change {
0% {
grid-template-columns: repeat(16, 1.875vw);
grid-auto-rows: 1.875vw;
}
100% {
grid-template-columns: repeat(16, 3.75vw);
grid-auto-rows: 3.75vw;
}
}