CSS-元素不固定宽高等比缩放-五八三

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

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

1. vm 相对浏览器视窗大小设置宽高

<!DOCTYPE html>


<html lang="en">


<head<img src=">"  width="30%" />
  <style>


    .box{


      width: 40vw;
      height: 30vw;
      background: #D1B3DF;


      margin: 0 auto;


      text-align: center;


    }

  </style>

</head>

<body>

  <div class="box">元素等比例缩放</div>

</body>

</html>

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

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

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

<!DOCTYPE html>


<html lang="en">


<head>

  <style>


    .box{


      width: 40%;

      aspect-ratio: 4/3;
      background: #D1B3DF;


      margin: 0 auto;


      text-align: center;


    }

  </style>

</head>

<body>

  <div class="box">元素等比例缩放</div>

</body>

</html>

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

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

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

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

<!DOCTYPE html>


<html lang="en">


<head>

  <style>


    .box{


      width: 40%;

      padding-top: 30%;
      background: #D1B3DF;


      margin: 0 auto;


      text-align: center;


      position: relative;
      overflow: scroll;
    }
    .box_inner{
      position: absolute;
      inset: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box_inner">元素等比例缩放</div>
  </div>
</body>
</html>

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

over 祝兄弟姐妹们发大财

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# CSS