aspect-ratio很爽,却是低版本浏览器的噩梦

语言: CN / TW / HK

错误案例

一次偶然的机会在抖音上刷到了aspect-ratio的css属性,就觉得这个css简直太爽了,正好跟我现在的项目有一个需求吻合,第二天我悄悄把aspect-ratio给安排上了,用起来是真的爽,然后噩梦就来了😈。

在测试阶段,在低版本浏览器上,就败得一塌糊涂,页面的宽高直接就乱了,完全不符合需求,一问才知道,原来是在搜狗浏览器上看的,吓得我赶紧改成其他方案。所以,就算现在CSS更新了很多新的属性,可以方便我们写更多的样式,但是还是需要注意浏览器兼容问题,以免出现类似的问题

aspect-ratio例子

说回aspect-ratio这个属性,这个属性就是保持宽高比

举个简单的例子🌰

image-20230303174526066

在这个卡片中,我们需要再红色框的这个盒子保持正方形,且这个整个盒子的宽高是不定的,宽度根据屏幕的宽度而定。

YaSol前期是比较傻的办法,就是就是通过js来获取红框的宽度,然后再通过js动态设置红款的高度,这样就能保证红框是正方形的。这个办法也不行不行,只是当我看到了aspect-ratio后,直接用一个CSS样式就能搞定,非常的方便

如果使用aspect-ratio的话,只需要在红框这个盒子上加上下面的CSS样式就能达到相同的效果

.box{  aspect-ratio:1/1 }

当然我们可以举一反三,如果说是1/1就说明宽高比例1:1,如果我们需要保持宽度是高度的两倍的话,那我们只需要把1/1改成2/1即可实现宽是高的两倍

image-20230303175225572

aspect-ratio解决兼容问题

今天因为遇到了这类兼容性问题,所以也就没有在项目中使用aspect-ratio,我也是去搜了一下,发现了一个解决方案,测试了一下还行,可以用。

就是利用positionpadding来达到这类效果,还是用上面的那个例子🌰来说。

我们在红框外包一层class为parent的div盒子,然后给他设置为相对定位,并且设置padding-top的值,下面是宽高比对应的padding-top

tips:感觉这个还是需要根据项目而定,反正YaSol在使用1/1宽高比的时候发现使用100%的padding-top并不能保证1/1,所以padding-top值可以自己根据情况而上下浮动

| 宽高比 | padding-top值 | | ------- | ---------------- | | 1/1 | 100% | | 4:3 | 75% | | 3:2 | 66.67% | | 16:9 | 56.25% |

案例

jcode

html

``` width: 200px

 
aspect-ratio
 
   
     
padding-top
   
 

​ ```

css

``` .container{  display: flex; }

box {

border: 1px solid black;  width: 200px;  background: yellow;  aspect-ratio: 1/1; }

box2{

width: 200px; } .parent{  position:relative;  width:100%;  padding-top:100%;  overflow: hidden; } .parent .padding_box{  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  width:100%;  background:green; } ```

js

const input = document.getElementById("input") const metric = document.getElementById("metric") const box = document.getElementById("box") const box2 = document.getElementById("box2") input.addEventListener("change", (e) => {  let spanText = `width: ${e.target.value}px`  metric.innerHTML = spanText  box.style.width = `${e.target.value}px`  box2.style.width = `${e.target.value}px` })

执行效果如下:

image-20230303183300675

总结

aspect-ratio好用简单,一个CSS样式搞定,但是兼容性差,如果有低版本低内核浏览器兼容需求,那么记得用之前先查看一下CSS属性的兼容性。

当然也许有更好更简单的办法实现,欢迎👏🏻大家一起讨论学习交流

image-20230303183736827