object-fit和object-position 使用詳解
技術標籤：CSS
當我們給img標籤加上固定的寬和高時，img標籤中的圖片會預設被拉伸變形，如圖：
<body>
<img src="./demo.jpg" alt="">
<style>
img{
width: 300px;
height: 150px;
}
</style>
</body>
圖1-給img元素加上固定寬高後圖片被拉伸變形
如果我們需要讓該元素佔據固定的寬高大小，而又不希望圖片被拉伸變形，可以在img標籤外套一個div（或其他父級元素），然後將固定的寬高加在父級元素上，這樣img標籤本身就可以只設定寬或高，讓另一邊自適應。除此之外，還可以將該圖片作為元素背景，然後通過background-size和background-position等背景相關樣式屬性來設定該圖片顯示的位置和大小。
為了更好且更方便地解決這類問題，我們可以使用接下來的這兩個css屬性——object-fit和object-position。
1.object-fit
css屬性object-fit一般用在img或video標籤上，定義了元素內容要如何適應容器的寬高，IE15及以前的版本不支援此屬性。
常用屬性值：
object-fit: fill;
預設值，內容可能會被拉伸以完全適應容器的寬高。和不使用該屬性的效果一致。
示例：
<style> img{ width: 300px; height: 150px; object-fit: fill; } </style>
圖2-設定“object-fit: fill;”效果與不使用該屬性一致，圖片會被拉伸以完全適應元素寬高
object-fit: cover;
保持內容的原有寬高比例進行縮放，讓圖片的內容能夠完全覆蓋元素容器，圖片可能會被剪下掉一部分。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: cover;
}
</style>
圖3-可以看見圖片沒有被拉伸，顯示出來的部分在原圖中處於中間位置
object-fit: contain;
保持內容原有寬高比例進行縮放，使內容能夠完全呈現出來。
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
}
</style>
圖4-設定“object-fit: contain;”後圖片會在img標籤內按原有比例進行縮放，使圖片全部顯示出來，可以看見圖片預設顯示在容器正中間
object-fit: scale-down;
保持內容的原有寬高比例進行縮放，顯示的效果將與屬性值分別為none和contain時內容尺寸較小的那個相同（contain的效果見上方，none的效果見下方）。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: scale-down;
}
</style>
圖5-可見在這個例子中，當object-fit屬性值為contain時圖片的顯示尺寸更小，所以scale-down屬性值與contain屬性值效果相同
object-fit: none;
保持元素內容原有的尺寸寬高，不會進行縮放，元素內容可能填不滿容器，也可能會被剪下掉一部分。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: none;
}
</style>
圖6-圖片內容保持了原有的寬高尺寸，因為原圖過大所以沒有完全顯示出來，顯示出來的部分在原圖中處於中間位置
object-fit: initial;
將該屬性的屬性值設為預設值（object-fit屬性的預設屬性值是fill）。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: initial;
}
</style>
圖7-將object-fit設為預設值，顯示效果與fill相同
object-fit: inherit;
從父元素繼承該屬性的值。
示例
<body>
<div>
<img src="./demo.jpg" alt="">
</div>
<style>
div{
object-fit: contain;
}
img{
width: 300px;
height: 150px;
}
</style>
</body>
圖8-只有父元素添加了object-fit屬性為contain，img標籤未新增該屬性時的顯示情況
<style>
div{
object-fit: contain;
}
img{
width: 300px;
height: 150px;
object-fit: inherit;
}
</style>
圖9-子元素img的object-fit屬性設為inherit後，從父元素繼承了該屬性的值
2.object-position
object-position屬性常與object-fit一起使用，一般用於img和video標籤，它規定了元素內容在容器內顯示的位置，預設為居中。該屬性同樣不被IE15及以前的瀏覽器支援。
常用屬性值：
position
指定內容在容器中的具體位置，第一個值指定內容在x軸上的位置，第二個值指定內容在y軸上的位置，預設都是50%，兩個值之間通過空格隔開。第二個值可以省略，如果省略則取預設值為居中。可用的表示位置的形式有：
x%
可以用百分比來表示內容在容器中顯示的位置。
示例
<body>
<img src="./demo.jpg" alt="">
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: 100% 0%;
}
</style>
</body>
圖10-object-fit屬性值為“contain”時，內容的高撐滿容器，此時object-position的第二個表示y軸位置的值無論是百分之幾都不會影響內容顯示的位置（但如果是具體的距離則可以）。同理，當object-fit值為“cover”時，內容的寬撐滿容器，object-position的第一個表示x軸位置的值無論是百分之幾都不會影響內容顯示的位置，這裡不再做測試。
left/right/top/bottom/center
可以使用方位值進行設定。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: right bottom;
}
</style>
圖11-同百分比一樣，當內容的高（或寬）撐滿容器的高（或寬）時，第二個（或第一個）方位值不會影響內容顯示的位置。這裡第二個方位值無論是“top”還是“bottom”、“center”，圖片的位置都不會發生改變。
具體的距離（包括數值和單位）
還可以為內容的位置指定具體的x軸和y軸上的距離（包含數值和單位），以容器的左上角為(0,0)座標，向右和向下分別為x軸和y軸的正半軸，可以設定負值。內容超出容器的部分可能會被剪下。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: 50px 50px;
}
</style>
圖12-使用具體的距離進行設定可以準確明瞭的定位內容在x軸和y軸上的位置，內容超出容器的部分會被剪下
混合使用
指定內容在容器內的具體位置時，上述三種位置表示方法可以混合使用。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: right 50px;
}
</style>
圖13-不同的位置表示方法可以混合使用，一樣會生效
initial
設為預設值，object-position屬性的預設值是“50% 50%”。
示例
<style>
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: initial;
}
</style>
圖14-object-position屬性值預設為居中顯示
inherit
從父元素繼承屬性值。
示例
<body>
<div>
<img src="./demo.jpg" alt="">
</div>
<style>
div{
object-position: left;
}
img{
width: 300px;
height: 150px;
object-fit: contain;
object-position: inherit;
}
</style>
</body>
圖15-img標籤可以從父元素div處繼承object-position的屬性值，如圖，圖片不再預設居中顯示，而是和div元素樣式中定義的一樣靠左顯示