如何將一張圖片完整顯示在容器裏？

如題，當圖片尺寸小於容器時，直接按圖片原尺寸顯示就行了，可是當圖片尺寸大於容器時，就要設法縮放圖片以徹底裝入容器，圖片要儘量的匹配容器尺寸，並保持寬高比例（圖片不能拉伸或擠壓變形）。

1. background-size: contain

background-size 是 CSS3 中的樣式屬性，屬性值 contain 表示圖像在保持原有比例的同時縮放到容器的可用空間的尺寸，以使其寬度和高度徹底適應容器尺寸，完整顯示出來。

.box {
  width: 420px;
  height: 300px;
  background: url(https://cdn.pixabay.com/photo/2019/07/27/09/05/red-panda-4366264__340.jpg) no-repeat;
  background-size: contain; /* 關鍵 */
  border: 1px solid #ccc;
}
複製代碼

<div class="box"></div>
複製代碼

2. object-fit: contain

若是 DOM 結構由於某種限制，不能使用背景圖片，而只能使用 <img> 插入圖片，這種場景能夠使用 object-fit: contain CSS 聲明，這裏的屬性值 contain 和 background-size 的 contain 效果相似。事實上 object-fit 屬性可做用在可替換元素上，如 video、iframe 等，不限於圖片。

注意：IE 不支持這個屬性

.box > img {
  width: 100%;
  object-fit: contain;
}
複製代碼

<div class="box">
  <img src="https://cdn.pixabay.com/photo/2019/07/27/09/05/red-panda-4366264__340.jpg">
</div>
複製代碼

3. 經過 js 計算

當沒法使用上面兩種自動化縮放的解決方案時，咱們得經過 JavaScript 來手動計算圖片的實際渲染尺寸。（例如 canvas 繪圖這種場景）

思路：

1. 圖片載入成功後獲取其寬高；
2. 判斷寬高是否小於或等於容器寬高，如是，則直接按原圖尺寸顯示便可；
3. 如圖片寬高大於容器寬高（寬度大於容器寬高，或高度大於容器寬高，或二者皆有之），取圖片寬、高最大的一個進行等比縮放；
4. 縮放完畢後再進行一次與容器尺寸的判斷（不排斥有些變態的圖）；
5. 如尺寸依然大於容器尺寸，則以大於容器的寬度或高度爲基準，再進行一次等比縮放；
6. 最終將縮放完成的圖顯示出來。

關鍵代碼：

const temp = {
  dWidth: 0
  dHeight: 0
};

if (boxWidth >= imgWidth && boxHeight >= imgHeight) {  // 照片小於等於容器尺寸
  temp.dWidth = imgWidth;
  temp.dHeight = imgHeight;
} else {
  if (imgWidth >= imgHeight) {  // 寬度優先
    temp.dWidth = boxWidth;
    temp.dHeight = imgHeight * boxWidth / imgWidth;
  } else {  // 高度優先
    temp.dHeight = boxHeight;
    temp.dWidth = imgWidth * boxHeight / imgHeight;
  }

  // 縮放後依然大於容器
  if (temp.dWidth > boxWidth) {
    temp.dHeight = temp.dHeight * boxWidth / temp.dWidth;
    temp.dWidth = boxWidth;
  } else if (temp.dHeight > boxHeight) {
    temp.dWidth = temp.dWidth * boxHeight / temp.dHeight;
    temp.dHeight = boxHeight;
  }
}

console.log(temp);
複製代碼

完整演示 Demo：codepen.io/wingmeng/pe…