商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~
CSS object-fit 是在 CSS Images Module Level 3, Level 4 都有定義。請參考本站文章 CSS 歷史，Mask and Clip
定義在 “module” 裡代表它是 CSS3 開始的，而且 CSS Images Module Level 3, Level 4 有各自的文件狀態。因為隨時間文件狀態會不同，這邊就不附上狀態。有興趣的讀者可以搜尋 “CSS Images Module Level 3” 或 “CSS Images Module Level 4” 看目前的文件狀態如何。
https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit
object-fit 主要是指定 <img> 或是 <video> 如何填滿它的 container。
object-fit 「直接」下在 <img> 或是 <video>。舉例來說 <img src="abc.jpg" style="width: 200px; height:300px; object-fit: contain;">
object-fit 有五種值：
- object-fit: fill，預設值，原圖會 stretch 成
<img>指定大小 (200 x 300)。基本上可以不用管這個值，下 object-fit 之前原本<img>就是這樣。 - object-fit: contain，原圖縮到
<img>中, 保持原 aspect ratio. - object-fit: cover，原圖蓋過
<img>指定的長寬，保持原 aspect ratio，超過的部分卡掉。 - object-fit: none，原圖不做任何 resize，如果超過
<img>的部分卡掉。 - object-fit: scale-down，選 contain 或 none 中較小的那一個，自動二選一。
CSS 老手一定想到，這不就是 background-image 的用法嘛 (object-fit 一樣有 object-position 可以指定)。沒錯，larry 目前也想不到什麼樣式「非 object-fit 不可」，應該都可以用 background-image 來取代。而且 background-image 從 CSS 2.1 就已經滿穩定的，沒有瀏覽器相容的問題。
如果有讀者知道 object-fit 獨家才能做到的效果，歡迎留言或來信給我～
商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~