讓圖片完美適應：掌握 CSS 的 Object-Fit 與 Object-Position
在CSS中，我們可以使用 background-size 和background-position屬性為背景圖像設置大小和位置。而 object-fit 和 object-position 屬性則允許我們對嵌入的圖像（以及其他替代元素，如視頻）做類似的操作。在本文中，我們將深入探討如何使用 object-fit 將圖像適應到特定的空間中，以及如何使用 object-position 在該空間中進行精確定位。
object-fit 作用
有時，圖像的大小超出了我們希望的空間。在過去，我們要么在圖像編輯器中裁剪圖像，要么通過設置寬度/或高度約束來調整圖像大小（這不是一個完美的選擇），或者執行某種復雜的裁剪，或者可能轉而使用背景圖像（如果圖像不僅僅是為了裝飾的話）。
object-fit 屬性為圖像提供了background-size為背景圖像所做的功能：它為圖像在指定區域內的顯示提供了選項，如果需要，可以隱藏部分圖像。這個指定的區域可能有固定的寬度和高度，或者可能是一個更具響應性的空間，如根據瀏覽器視口大小變化的網格區域。
object-fit 工作原理
每個HTML元素都有自己的“content box”，代表它所占據的空間。默認情況下，圖像的內容框與圖像的自然尺寸相匹配。
當我們為圖像應用不同的寬度和/或高度時，我們實際上是在改變內容框的尺寸。如果內容框的尺寸發生變化，圖像仍然會填充內容框。所以，如果我們有一個300px乘300px的圖像，并將其尺寸設置為300px乘200px，圖像會出現扭曲。
object-fit 屬性為我們提供了圖像在該調整后的內容框內顯示的選項。而不是讓它出現扭曲，我們可以隱藏圖像的一部分，或者強制圖像只部分填充其內容框，這樣它就完全可見且不會扭曲。
設置
為了詳細說明 object-fit 屬性的工作原理，我們將圖像放在一個使用Grid布局居中的 div 中。div 有一個棕色的背景，以及由::before偽元素提供的虛線邊框，這將幫助我們理解圖像發生了什么。
// html
<article>
<div>
</div>
</article>// css
article {
display: grid;
grid-template: 1fr 200px 1fr / 1fr 300px 1fr;
height: 100vh;
}
div {
grid-row: 2;
grid-column: 2;
background-color: brown;
position: relative;
}
div::before {
content: "";
position: absolute;
inset: -5px;
border: 5px dashed white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #30353b;
}事例地址：https://codepen.io/SitePoint/pen/PoxRojJ
在圖像演示中，我們將使用以下圖像，其自然尺寸為 400px x 600px .
我們的圖像比我們的div大得多，如果我們將圖像放在div內，它會溢出，如下所示。
我們的目標是防止圖像從其容器中爆裂出來，但也要讓它舒適地適應其中，object-fit 將幫助我們做到這一點。
如果我們使用背景圖像，我們可以設置類似background-size: cover，背景圖像將被限制在容器的區域內。但正如我們所看到的，為了讓 object-fit 發揮作用，我們首先需要在圖像的內容框上定義一個與其自然大小不同的高度和寬度。在下面的示例中，我們將圖像的寬度和高度限制為100%，這樣其內容框就與容器div的大小相匹配：
img {
width: 100%;
height: 100%;
}
圖像及其內容框現在緊密地適應容器，但圖像嚴重扭曲。這就是object-fit的魔法來拯救我們的地方，所以讓我們看看它有什么提供。
使用 object-fit 將圖像適應容器
object-fit 屬性為我們提供了五個主要的關鍵字值，以確定我們的圖像如何在其容器內顯示。其中兩個關鍵字——cover和contain——與它們的background-size對應項執行相同的角色。
object-fit: cover
cover 值強制圖像完全覆蓋容器的區域，盡可能多地顯示圖像，而不會扭曲它：
img {
width: 100%;
height: 100%;
object-fit: cover;
}
因為圖像相當高，我們看到的是其完整的寬度，但不是其完整的高度，如下圖所示。
cover 值確保圖像的較窄部分完全填充容器。
值得注意的是，圖像的定位。與background-position默認為0 0（從容器的左上角定位背景圖像）不同，object-position 的默認值是50% 50%，將圖像居中于其內容框。當我們稍后查看object-position屬性時，我們將學習如何指定圖像的可見部分。
object-fit: contain
contain 值強制圖像完全適應其內容框，但不會扭曲。圖像保持其自然的寬高比，因此不會填滿其容器：
img {
width: 100%;
height: 100%;
object-fit: contain;
}
你可能會認為，只需在圖像上設置height: 100%就可以得到上面的相同結果。但實際上并不完全如此，因為這樣會使圖像定位到左邊，而不是居中，這是object-fit的默認設置。結合object-position，object-fit為圖像在容器內的定位提供了更多的選項。
object-fit: none
none 屬性允許圖像保持其自然的原始尺寸。只有可以適應調整后的內容框的部分才是可見的。
與object-fit: cover不同，我們的圖像不會被強制在至少一個軸上完全可見。原始圖像的寬度和高度都大于內容框，所以它在兩個方向上都溢出，如下圖所示。none 值保持圖像的正常大小，因此在容器中看不到圖像的頂部、底部和兩側。
再次注意，默認情況下，圖像的中心與內容框的中心對齊。
還要注意，object-fit: none 并不意味著 object-fit 什么都不做。正如我們所看到的，與完全沒有 object-fit 設置相比，它做了很多工作。
object-fit: scale-down
scale-down 屬性與 none 或 contain 相同。它選擇使圖像顯示得更小的那個。
顯然，在我們當前的示例中，它會選擇 contain，因為我們的容器比圖像小。如果我們的容器比圖像大，none 會占主導地位，圖像會保持其自然大小，而不是在一個方向上填充容器，如你在這個CodePen演示中所看到的。
object-fit: fill
如果我們在演示中將 object-fit 值更改為 fill，就好像根本沒有設置 object-fit。這是因為，默認情況下，圖像無論設置了什么尺寸都會填充其內容框。
因為 fill 屬性可能會扭曲圖像，所以在大多數情況下，它可能不是最好的選擇。
使用 object-fit 而不使用容器
在上面的示例中，我們一直在使用 object-fit 來調整 div 容器內的圖像大小，但我們在實踐中看到的原理在沒有容器的情況下同樣適用。重要的是圖像的內容框的大小以及圖像在該框內的顯示方式。
例如，我們可以將以下CSS應用于圖像，而不需要任何周圍的 div：
img {
width: 300px;
height: 300px;
object-fit: contain;
}
嘗試更改上面的Pen中object-fit屬性的值為 cover、fill、scale-down 和 none，看看每個的行為如何。結果與圖像設置為寬度和高度為 100% 并包含在一個設置為 300px 乘300px 的 div 中的結果相同。
在響應式布局中使用 object-fit
object-fit 屬性在圖像的指定區域的尺寸響應瀏覽器視口大小的情況下可能最有用。以下演示將我們的圖像分配給一個特定的、靈活的網格區域：
img {
width: 100%;
height: 100%;
object-fit: cover;
grid-row: 2 / 3;
grid-column: 2 / 3;
}
article {
display: grid;
grid-template: 5% 1fr 10% / 40% 1fr 40%;
height: 100vh;
}事例地址：https://codepen.io/SitePoint/pen/JjeLWXW
隨著視口和網格區域的擴展和收縮，cover 值確保圖像始終很好地適應其網格區域，改變圖像的可見部分，使其永遠不會扭曲。
使用 object-position 設置圖像的位置
正如 background-position 用于設置容器內背景圖像的位置一樣，object-position 屬性用于控制圖像元素在其自己的內容框內的位置。
正如我們所看到的，object-position 默認為 50% 50%，這意味著圖像的中心與其內容框的中心對齊。我們可以使用一系列的關鍵字值（如 top、bottom、left、right、center）或使用長度值（如px、em或%）或兩者的組合來更改這一點。
假設我們現在想要從右下角定位我們的圖像。我們可以使用關鍵字 right bottom，或百分比值100% 100%：
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right bottom; /* or 100% 100% */
}
我們還可以使用像像素或 ems這樣的單位偏移圖像從其容器。例如：
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 20px 2em; /* 20px from left and 2em from top */
}
我們可以通過結合單位和關鍵字來從右下角進行類似的偏移，如下所示：
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right 20px bottom 2em; /* 20px from right and 2em from bottom */
}
我們已經看到，我們可以使用百分比來定位圖像在其內容框中。與 background-position 屬性一樣，使用百分比與 object-position 可能會有點混淆。object-position 為 50% 50% 意味著圖像的中心與其內容框的中心在水平和垂直軸上對齊。
如果我們將 object-position 設置為 20% 40%，這意味著圖像左邊 20% 的垂直線與內容框左邊20% 的垂直線重合，圖像頂部40% 的水平線與內容框頂部40%的水平線重合，如下圖所示。
圖像和容器的20%和40%的垂直和水平線對齊
結論
object-fit 屬性設計用于與任何類型的替代元素一起工作，如圖像、視頻、iframes 和embeds。如何將像視頻這樣的元素適應到定義的區域（其中一些元素可能被隱藏）可能是一個值得討論的問題，但毫無疑問，這里有可行的用例。更好的選擇可能是將iframe的寬度設置為可用空間的width: 100%，然后使用aspect-ratio屬性來保持其比例。
更常見的是，有一個圖像需要適應的特定空間，所以 object-fit 對于允許圖像適應該空間而不被扭曲（即使其中一部分必須被隱藏）非常有用。
如何使用CSS的object-fit屬性：
object-fit: contain contain值強制圖像完全適應其內容框，但不會扭曲。圖像保持其自然的寬高比，因此不會填滿其容器：
css Copy code img { width: 100%; height: 100%; object-fit: contain; } 你可能會認為，只需在圖像上設置height: 100%就可以得到上面的相同結果。但實際上并不完全如此，因為這樣會使圖像定位到左邊，而不是居中，這是object-fit的默認設置。結合object-position，object-fit為圖像在容器內的定位提供了更多的選項。
object-fit: none none屬性允許圖像保持其自然的原始尺寸。只有可以適應調整后的內容框的部分才是可見的。
與object-fit: cover不同，我們的圖像不會被強制在至少一個軸上完全可見。原始圖像的寬度和高度都大于內容框，所以它在兩個方向上都溢出，如下圖所示。
none值保持圖像的正常大小，因此在容器中看不到圖像的頂部、底部和兩側。
再次注意，默認情況下，圖像的中心與內容框的中心對齊。
還要注意，object-fit: none并不意味著object-fit什么都不做。正如我們所看到的，與完全沒有object-fit設置相比，它做了很多工作。（如果你在上面的Pen中刪除object-fit: none，你會得到一個提醒。）
object-fit: scale-down scale-down屬性與none或contain相同。它選擇使圖像顯示得更小的那個。
顯然，在我們當前的示例中，它會選擇contain，因為我們的容器比圖像小。如果我們的容器比圖像大，none會占主導地位，圖像會保持其自然大小，而不是在一個方向上填充容器，如你在這個CodePen演示中所看到的。
object-fit: fill 如果我們在演示中將object-fit值更改為fill，就好像根本沒有設置object-fit。這是因為，默認情況下，圖像無論設置了什么尺寸都會填充其內容框。
因為fill屬性可能會扭曲圖像，所以在大多數情況下，它可能不是最好的選擇。
使用object-fit而不使用容器 在上面的示例中，我們一直在使用object-fit來調整div容器內的圖像大小，但我們在實踐中看到的原理在沒有容器的情況下同樣適用。重要的是圖像的內容框的大小以及圖像在該框內的顯示方式。
例如，我們可以將以下CSS應用于圖像，而不需要任何周圍的div：
css Copy code img { width: 300px; height: 300px; object-fit: contain; } 下面的CodePen演示中顯示了結果。
嘗試更改上面的Pen中object-fit屬性的值為cover、fill、scale-down和none，看看每個的行為如何。結果與圖像設置為寬度和高度為100%并包含在一個設置為300px乘300px的div中的結果相同。
在響應式布局中使用object-fit object-fit屬性在圖像的指定區域的尺寸響應瀏覽器視口大小的情況下可能最有用。以下演示將我們的圖像分配給一個特定的、靈活的網格區域：
css Copy code img { width: 100%; height: 100%; object-fit: cover; grid-row: 2 / 3; grid-column: 2 / 3; }
article { display: grid; grid-template: 5% 1fr 10% / 40% 1fr 40%; height: 100vh; } 隨著視口和網格區域的擴展和收縮，cover值確保圖像始終很好地適應其網格區域，改變圖像的可見部分，使其永遠不會扭曲。（查看全屏視圖的演示以獲得最佳效果。）
要了解更多關于網格區域的信息，請查看我們的CSS Grid初學者指南。
使用object-position設置圖像的位置 正如background-position用于設置容器內背景圖像的位置一樣，object-position屬性用于控制圖像元素在其自己的內容框內的位置。
正如我們所看到的，object-position默認為50% 50%，這意味著圖像的中心與其內容框的中心對齊。我們可以使用一系列的關鍵字值（如top、bottom、left、right、center）或使用長度值（如px、em或%）或兩者的組合來更改這一點。
假設我們現在想要從右下角定位我們的圖像。我們可以使用關鍵字right bottom，或百分比值100% 100%：
css Copy code img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; /* 或 100% 100% */ } 下面的圖像說明了我們的圖像現在的位置。
我們的圖像現在從右下角定位，這樣圖像的頂部部分被隱藏了
你可以在上面的Pen中嘗試定位關鍵字，看看它們是如何工作的，以及object-fit關鍵字，但結果應該很容易預測。
我們還可以使用像像素或ems這樣的單位偏移圖像從其容器。例如：
css Copy code img { width: 100%; height: 100%; object-fit: cover; object-position: 20px 2em; /* 從左邊20px和從頂部2em */ } 我們可以通過結合單位和關鍵字來從右下角進行類似的偏移，如下所示：
css Copy code img { width: 100%; height: 100%; object-fit: cover; object-position: right 20px bottom 2em; /* 從右邊20px和從底部2em */ } 我們已經看到，我們可以使用百分比來定位圖像在其內容框中。與background-position屬性一樣，使用百分比與object-position可能會有點混淆。object-position為50% 50%意味著圖像的中心與其內容框的中心在水平和垂直軸上對齊。
如果我們將object-position設置為20% 40%，這意味著圖像左邊20%的垂直線與內容框左邊20%的垂直線重合，圖像頂部40%的水平線與內容框頂部40%的水平線重合，如下圖所示。
圖像和容器的20%和40%的垂直和水平線對齊
我們可以在下面的CodePen演示中看到這一點。
結論 object-fit屬性設計用于與任何類型的替代元素一起工作，如圖像、視頻、iframes和embeds。如何將像視頻這樣的元素適應到定義的區域（其中一些元素可能被隱藏）可能是一個值得討論的問題，但毫無疑問，這里有可行的用例。更好的選擇可能是將iframe的寬度設置為可用空間的width: 100%，然后使用aspect-ratio屬性來保持其比例。
更常見的是，有一個圖像需要適應的特定空間，所以object-fit對于允許圖像適應該空間而不被扭曲（即使其中一部分必須被隱藏）非常有用。
最后，正如上面所提到的，值得將 object-fit 和 object-position 屬性與 background-size 和 background-position 屬性進行比較，它們有很多相似之處。
