如何让 元素 的 宽度与高度 保持固定的比例?
第一种
关键属性:aspect-ratio: 2/1
例子:让元素保持 宽/高 为 2比1
.box {
aspect-ratio: 2/1;
}
第二种
关键属性:width: 100%; padding-top: 100%;
例子:
.img_box {
width : 100%;
padding-top: 100%;
position : relative;
overflow : hidden;
img {
position : absolute;
top : -0%;
transform-origin: center center;
width : 100%;
height : 100%;
transition : all 1s ease-in-out;
}
}