【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

在使用Bootstrap橫向卡片元件時，<img>本身加上了img-fluid這個class
img-fluid是Bootstrap的class，用途是max-width: 100%和height: auto
因此，當圖片過大時，最大就只會是等於父元素寬度
然而，雖然沒有破版，但因為寬度變窄，高度也變低了，此時排版就出了問題

範例：https://codepen.io/linchinhsuan/pen/vYWPMPm?editors=1100

在這個案例中我們可以看到，我們使用了官方的card元件，但最終呈現的視覺效果卻不是我們所希望的

既然高度不夠，那就讓它height: 100%？

因為height: auto的關係，所以高度是根據圖片比例決定的，例如圖片是200x100，但父元素最大只給你寬100，就會被縮到100x50（維持寬高2:1）
我們可以透過height: 100%去強制改變它的高度
不過這裡要注意一個小細節，因為img-fluid本身設定了height: auto，而且img-fluid是class，所以如果只是寫：

img{
  height: 100%;
}

是不會有效果的，因為HTML標籤的CSS權重不夠

因此，這裡使用Bootstrap的class來蓋過它，我們使用h-100
範例：https://codepen.io/linchinhsuan/pen/BambeQq
此時沒有滿版的問題解決了，但新的問題接踵而來，圖片變形了
其實很好理解，例如本來是200x100（寬高2:1）的圖片為了滿版強行被拉成200x200，變形是理所當然的

那，又該如何不讓圖片變形，又讓它滿版呢？

用object-fit處理圖片變形

範例：https://codepen.io/linchinhsuan/pen/NWwJVKO?editors=1100

object-fit這個CSS屬性是本篇的重點
我們自訂一個class，並加入這段程式碼：

object-fit: cover;

此時，圖片就會維持原本的比例放大到寬高兩邊都至少滿版為止
聽起來有點拗口
舉例來說如果空間是200x200的正方形，圖片是200x100，那圖片就會被放大到400x200
這就同時保持了圖片的正確比例，和滿版的需求了

object-fit的其他值

object-fit這個CSS屬性有很多值可以設定
範例：https://codepen.io/linchinhsuan/pen/gOXEJbe?editors=1100

fill是預設值
cover是讓圖片維持原本的比例放大到寬高兩邊都至少滿版為止
contain是讓圖片維持原本比例放大到其中一邊滿版為止，例如空間是200x200，圖片是100x70，就只會被放大到200x140（因為一邊已經滿版了），但圖片比例維持不變，不會變形
none是不會縮放圖片，圖片多大就多大，但不會破版（超出父元素）
scale-down是在contain和none之間二擇一，如果contain的情況圖片是200x140，而none的情況圖片是2000x1400，就選擇比較小的那個，在本案例中，因為原圖相當大，但我只給了父元素200x200的空間所以scale-down就跟contain一樣