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

解決後的效果圖