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

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

应用场景

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

解决方式

出现上述情况的代码

1. 可以看出为了保证图片不失真，同时当浏览器大小变化时，单个项目能跟随一起动态变化，项目本身以及图片的容器没有设置硬性高度

<div class="column-item training-item col-md-3" data-id="${training.hexId}">
	...
  <div class="thumbnail-img">
    <img src="${training.thumbnail}" alt="">
  </div>
	...
</div>

.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% 则基本可以确保容器撑开的大小与图片正确比例一致

<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>

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

解决后的效果图