< Back

CSS高宽等比例自适应矩形

比如有如下代码：

<swiper :options="swiperOption" >
  <swiper-slide>
    <img class="swiper-img" src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/1d8faa9f4d49b77ca1e61e2b478260f7.jpg_750x200_25cf76e2.jpg"/>
  </swiper-slide>
</swiper>
.swiper-img {
    width: 100%;
}

有个img标签需要加载网络图片，网络比较慢的时候，因为图片还没加载出来，下面的文字内容（如果有的话）先出来的话，等到图片加载出来，撑开img区域，之前的文字内容会往下挤开。这个时候可以用CSS来给图片“预留”宽高等比例的区域，避免出现上面那种文字区域被挤开的情况。

办法如下：

.container {
    width: 100%;
    height: 0;
    padding-bottom: 26.6%
}

用一个父元素container包裹，利用padding-bottom来撑开高度，因为padding是根据父元素（container）的宽度设置的，再根据图片是750*200的尺寸，高宽比是26.6%。将height设置为0的目的就是为了将盒子的高度全部交给padding-bottom设置。

参考：