CSS3小技巧-动态设定div的宽高比

前言

一直在写vue项目中使用iview的table,它有个设置宽高固定的属性。于是我想在外层套一个div并且这个div动态的随着窗口大小调整，并且满足一定的宽高比，有这种需求是因为一个统计页面上有多个统计类型，其中就有表格。

1. padding-bottom实现普通元素固定宽高比,里main的元素获取父元素的全部宽高采用绝对布局position:absolute;

   <div class="wrapper">
   
   	<div class="intrinsic-aspect-ratio-container"></div>
   
   </div>
   

   .wrapper {
   
   	width: 40vw;
   
   }
   
   .intrinsic-aspect-ratio-container {
   
   	width: 100%;
   
   	height: 0;
   
   	padding: 0;
   
   	padding-bottom: 75%;
   
   	margin: 50px;
   
   	background-color: lightsalmon;
   
   }
   

2. aspect-ratio属性指定元素宽高比

   aspect-ratio的语法格式如下：aspect-ratio: <width-ratio>/<height-ratio>。

   /* 高度随动 */
   
   .box1 {
   
   	width: 100%;
   
   	height: auto;
   
   	aspect-ratio: 16/9;
   
   }
   
   /* 宽度随动 */
   
   .box1 {
   
   	width: auto;
   
   	height: 100%;
   
   	aspect-ratio: 16/9;
   
   }