[分享]css中如何设置等比例

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

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

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

.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;
} 

.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;
}