css中如何设置等比例

关于CSS中的等比例设置 在进行网页布局时，等比例设置常常被用于图片、视频或其他多媒体素材的展示。下面介绍几种等比例设置的CSS方法。 1. 长宽百分比设置 设置元素的宽度为百分比，并设置height:auto。这样在元素的高度与宽度的比例会保持不变。

.img{
  width:50%;
  height:auto;
} 

2. 使用padding百分比设置 给外层元素设置padding-top或padding-bottom百分比，使其与内层元素的宽度比例保持一致。

.outer{
  position:relative;
  padding-top:50%;
}
.inner{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url('example.jpg');
  background-size:cover;
} 

3. 使用伪元素设置 给元素添加伪元素，然后利用CSS3 transform缩放实现等比例设置。

.img{
  position:relative;
}
.img::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-top:100%;
  background-image:url('example.jpg');
  background-size:cover;
}
.img img{
  position:absolute!important; /*此处!important是为了防止图片在其他地方被改变*/
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
} 

以上是几种常用的等比例设置的CSS方法，可以根据不同的需求进行选择使用。