CSS 图片固定长宽比实现高度自适应

某些场景下图片的宽度不固定,为了保证图片不失真,需要通过固定长宽比的方式来动态计算图片高度

应用场景

  1. 例如图片期望大小是 460 * 240 ,但真实图片可能出现如下情况
    1. 图片大小不固定
    2. 图片可能加载失败
  2. 在一个通过 panel 展现的列表中,由于浏览器可大可小,单个项目的宽度不固定
  3. 如果固定高度,会导致图片出现比例不协调的情况
  4. 如果不固定高度,会出现如下单个项目高度不一致的情况

解决方式

出现上述情况的代码

  1. 可以看出为了保证图片不失真,同时当浏览器大小变化时,单个项目能跟随一起动态变化,项目本身以及图片的容器没有设置硬性高度
1
2
3
4
5
6
7
<div class="column-item training-item col-md-3" data-id="${training.hexId}">
	...
  <div class="thumbnail-img">
    <img src="${training.thumbnail}" alt="">
  </div>
	...
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.column-item {
  margin-top: 15px;
  padding-left: 0;
}

.column-item .thumbnail-img {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #eef3ff;
}

.column-item .thumbnail-img img {
  width: 100%;
}

解决上述情况的代码

  1. 将原本作为 <img/> 展现的图片改为父容器的背景
  2. 父容器背景的布局方式设置为 background-position: center; 以及 background-size: cover;
  3. 父容器的 height 设置为 0 ,真实高度由 padding-top 填充
    • 由于高度为 0 ,如果容器内部还存在其他子元素,则需要设置为 position: absolute
    • 子元素为 absolute 的话,父容器则需要设置为 position: relative
  4. 关键点在于 padding-top 的值如何确定
    • 前面说过图片的比例为 460 * 240
    • 那么计算比例应该是 100 * 240 / 460 得出 52.17
    • padding-top: 52.17% 则基本可以确保容器撑开的大小与图片正确比例一致
1
2
3
4
5
<div class="column-item training-item col-md-3" data-id="${training.hexId}">
	...
  <div class="thumbnail-img" style="background-image: url(${training.thumbnail})"></div>
	...
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.column-item {
  margin-top: 15px;
  padding-left: 0;
}

.column-item .thumbnail-img {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #eef3ff;
  position: relative;
  height: 0;
  padding-top: 52.17%;
  background-position: center;
  background-size: cover;
}

解决后的效果图