CSSobject-fit 屬性用於指定應如何調整 img或video的大小以適合其容器
Temperature: 0 °C
在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 #故事 #CSS #objectfit
https://innstory.com/story-CSSobjectfit_屬性用於指定應如何調整_img或video的大小以適合其容器-2820
CSS
