padding-top等
这是最早提出的一种实现方案,主要借助的原理是利用padding-top或者padding-bottom的百分比值,实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法,需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute,不然子元素内容都将被padding挤出容器(造成内容溢出)。
.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%;
}
使用aspect-ratio
// padding-top
.container {
width: 100%;
padding-top: 56.25%;
}
// aspect-ratio
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
object-fit 属性用于指定应如何调整 或 的大小以适合其容器。
object-fit 属性可接受如下值:
fill - 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。
cover - 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)