CSS 纵横比属性 --- aspect-ratio
传统的CSS只能通过宽高自己计算纵横比,或者保持原始纵横比.现在可以使用属性来设置固定的纵横比.
·
什么是 aspect-ratio?
需求:对于一个响应式的网站,在缩放的时候,需要保持图片和视频的纵横比
传统的 CSS 只能通过 宽高自己计算纵横比
,或者 保持原始纵横比
.
现在可以使用 aspect-ratio
属性来设置固定的纵横比.
aspect-ratio
CSS aspect-ratio 属性接收以 "/"
分隔的两个数字作为属性值,分别代表宽度和高度的比例,例如 16 / 9 表示 16:9 的纵横比, 5 / 4 表示 5:4 的纵横比:
aspect-ratio: 16 / 9; // 纵横比为 16:9
aspect-ratio: 5 / 4; // 纵横比为 5:4
"/"
和后面的高度比可以省略,默认为 1
:
aspect-ratio: 4; // 纵横比为 4:1
aspect-ratio 属性值也可以设置为 auto,在缩放的时候,保持一定的纵横比:
aspect-ratio: auto; // 保持原有的纵横比
任何一个具有宽高的元素都可以使用它:
div .box {
aspect-ratio: 5 / 4;
}
示例:
准备一个盒子,盒子里面放入图片。无论容器的宽高怎么变化,图片都能保持 1:1 的纵横比
.box {
width:500px;
height:500px;
border:1px solid red;
resize:both; // 图片容器设置随意缩放
overflow:auto;
}
.box img {
max-width:100%;
max-height:100%;
aspect-ratio:1 / 1; // 设置图片的纵横比为 1:1,最大高度和宽度都是容器的 100%,图片不会超出容器
}
兼容性:
使用 CSS - aspect-radio 属性,兼容性可以参考该图:
更多推荐
已为社区贡献3条内容
所有评论(0)