CSS

2024-01-18 18:38| 来源: 网络整理| 查看: 265

如何处理元素的高度随宽度变化，能够根据窗口大小实现等比例缩放。

例如希望元素宽度是窗口宽度的10%,而希望元素宽高比为4/3或者19/6,常见图片或者视频的比例。仅用css处理，这里提供几种思路

1. vm 相对浏览器视窗大小设置宽高 .box{ width: 40vw; height: 30vw; background: #D1B3DF; margin: 0 auto; text-align: center; } 元素等比例缩放

需要注意的是vm的宽度是相对于浏览器视窗大小的,那在实际开发中可能更希望元素是相对于父元素的宽度设置百分比

2. css属性aspect-ratio设置比例

这里可以用到一个css属性 aspect-ratio, 这个属性为盒子规定了首选纵横比,也就是他的值可以设置成元素的宽高比，一行css代码就可以搞定。

.box{ width: 40%; aspect-ratio: 4/3; background: #D1B3DF; margin: 0 auto; text-align: center; } 元素等比例缩放

这个属性方便是方便，但是有点兼容性多多少少让人不是那么放心，谷歌在21年才支持，其他浏览器更堪忧，当然胆子大的兄弟姐妹直接冲，给胆子小的兄弟姐妹再提供一种思路。

3. padding设置百分比撑将元素高度撑开

padding是可以继承父元素设置百分比的，也就是说可以靠padding把父元素的高度撑起来。但是这里有个问题，padding把高度全撑起来了，那我元素里如果还有元素怎么办，例如我元素宽度160，宽高比例4/3，高度应该是120，但是里面有文字就变成140了

那这个问题就很好解决了，元素里面再包一层定位一下

.box{ width: 40%; padding-top: 30%; background: #D1B3DF; margin: 0 auto; text-align: center; position: relative; overflow: scroll; } .box_inner{ position: absolute; inset: 0; } 元素等比例缩放

那其实也可以直接让ui给我搞个4/3比例的图，里面内容定位一下，但是如果不给图片高度的话，浏览器等图片加载完会重新绘制计算高度，影响性能。

over 祝兄弟姐妹们发大财

【本文地址】

公司简介

联系我们