innstory

CSSobject-fit 屬性用於指定應如何調整 img或video的大小以適合其容器

在UI排版時常會遇到一個問題，後台上傳的圖片比例無法符合前台顯示的DIV容器。
以前我比較常用的方式是使用PHP GD裁切。

GD的好處是你可以調整你想要顯示的位置在設定的範圍內。

但其實若只是要讓圖片或video顯示在前台DIV容器裡，也可以使用CSS object-fit 屬性。

該屬性告訴內容以多種方式填充容器；例如「保持縱橫比」或「伸展」。

使用方式也很簡單，只要在原本的CSS底下加入object-fit屬性就可以，以圖片為例：
object-fit：cover
圖像保持其縱橫比並填充給定的尺寸，圖像將被裁剪以適合容器。

img {

width: 360px;

height: 640px;

object-fit: cover;

}

object-fit: contain
圖像保持其縱橫比，但調整大小以適應給定的尺寸。

img {

width: 360px;

height: 640px;

object-fit: contain;

}

object-fit: fill
圖像調整大小以填充給定的尺寸。如有必要，圖像將被拉伸或壓扁以適合容器。

img {

width: 360px;

height: 640px;

object-fit: fill;

}

以上紀錄
參考網站w3schools.com