Resizemode詳解

在開發Web應用時，經常需要展示圖片。為了適應不同的屏幕尺寸，我們需要對圖片進行縮放或者裁剪操作，這時候就需要用到resizemode。

一、Cover

在resizemode中，cover是最常用的一個選項。它能夠自動將原圖縮放至完全覆蓋容器，並保持縱橫比例不變，但可能剪裁圖片的某些部分。

具體來說，如果原圖的縱橫比例與容器不同，cover選項會自動縮放原圖，使之一個方向與容器相等，另一個方向上則超出容器。接着，選擇超出圖片的一部分進行剪裁，使得剩餘的部分完全覆蓋容器。這樣，容器中部分區域可能顯示不出原圖全部內容。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

二、Contain

contain選項也能夠讓原圖自適應容器，但是不會剪裁圖片。它會將原圖縮放至剛好能夠完全展示，並保持縱橫比例。如果容器的部分區域不能夠完全覆蓋原圖，則該區域將會顯示背景色。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

三、Stretch

stretch選項可以讓原圖完全填充容器，並拉伸或壓縮原圖來適應容器，不保持縱橫比例。這樣，原圖可能會失真變形，並且不會顯示原圖的全部內容。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: stretch;
}

四、None

如果希望圖片保持原本大小，不進行縮放或者剪裁，則可以選擇none選項。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: auto;
  height: auto;
  object-fit: none;
}

五、Scale-down

scale-down選項也能夠讓原圖自適應容器，但它不會拉伸或者壓縮原圖。如果原圖已經小於容器，則直接按原圖顯示。否則，與contain選項類似，縮放原圖並完全展示。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

六、總結

以上介紹的是常見的resizemode選項，但並不是所有瀏覽器都支持所有選項。如果需要兼容多個瀏覽器，建議在代碼中同時使用多種resizemode選項，並通過CSS前綴和JavaScript進行特定瀏覽器的兼容。