object-fit和object-position_定義圖片和視頻元素在容器內(nèi)如何顯示的css屬性
<body><img src="./demo.jpg" alt=""><style>img{width: 300px;height: 150px;}</style></body>
如果我們需要讓該元素占據(jù)固定的寬高大小，而又不希望圖片被拉伸變形，可以在img標(biāo)簽外套一個div（或其他父級元素），然后將固定的寬高加在父級元素上，這樣img標(biāo)簽本身就可以只設(shè)定寬或高，讓另一邊自適應(yīng)。
除此之外，還可以將該圖片作為元素背景，然后通過background-size和background-position等背景相關(guān)樣式屬性來設(shè)置該圖片顯示的位置和大小。
但這些方法要么看上去頗為不便，要么并不適用于video標(biāo)簽中的視頻元素。
為了更好且更方便地解決這類問題，我們可以使用接下來的這兩個css屬性——object-fit和object-position。
1、object-fit
css屬性object-fit一般用在img或video標(biāo)簽上，定義了元素內(nèi)容要如何適應(yīng)容器的寬高，IE15及以前的版本不支持此屬性。
常用屬性值：
object-fit: fill;
默認(rèn)值，內(nèi)容可能會被拉伸以完全適應(yīng)容器的寬高。和不使用該屬性的效果一致。
示例：
<style>img{width: 300px;height: 150px;object-fit: fill;}</style>
圖2-設(shè)置“object-fit: fill;”效果與不使用該屬性一致，圖片會被拉伸以完全適應(yīng)元素寬高
object-fit: cover;
保持內(nèi)容的原有寬高比例進(jìn)行縮放，讓圖片的內(nèi)容能夠完全覆蓋元素容器，圖片可能會被剪切掉一部分。
示例
<style>img{width: 300px;height: 150px;object-fit: cover;}</style>
object-fit: contain;
示例：
<style>img{width: 300px;height: 150px;object-fit: contain;}</style>
圖4-設(shè)置“object-fit: contain;”后圖片會在img標(biāo)簽內(nèi)按原有比例進(jìn)行縮放，使圖片全部顯示出來，可以看見圖片默認(rèn)顯示在容器正中間
object-fit: scale-down;
保持內(nèi)容的原有寬高比例進(jìn)行縮放，顯示的效果將與屬性值分別為none和contain時內(nèi)容尺寸較小的那個相同（contain的效果見上方，none的效果見下方）。
示例
<style>img{width: 300px;height: 150px;object-fit: scale-down;}</style>
圖5-可見在這個例子中，當(dāng)object-fit屬性值為contain時圖片的顯示尺寸更小，所以scale-down屬性值與contain屬性值效果相同
object-fit: none;
示例
<style>img{width: 300px;height: 150px;object-fit: none;}</style>
圖6-圖片內(nèi)容保持了原有的寬高尺寸，因?yàn)樵瓐D過大所以沒有完全顯示出來，顯示出來的部分在原圖中處于中間位置
object-fit: initial;
將該屬性的屬性值設(shè)為默認(rèn)值（object-fit屬性的默認(rèn)屬性值是fill）。
示例
<style>img{width: 300px;height: 150px;object-fit: initial;}</style>
圖7-將object-fit設(shè)為默認(rèn)值，顯示效果與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標(biāo)簽未添加該屬性時的顯示情況
<style>div{object-fit: contain;}img{width: 300px;height: 150px;object-fit: inherit;}</style>
圖9-子元素img的object-fit屬性設(shè)為inherit后，從父元素繼承了該屬性的值
2、object-position
object-position屬性常與object-fit一起使用，一般用于img和video標(biāo)簽，它規(guī)定了元素內(nèi)容在容器內(nèi)顯示的位置，默認(rèn)為居中。該屬性同樣不被IE15及以前的瀏覽器支持。
常用屬性值：
position
指定內(nèi)容在容器中的具體位置，第一個值指定內(nèi)容在x軸上的位置，第二個值指定內(nèi)容在y軸上的位置，默認(rèn)都是50%，兩個值之間通過空格隔開。第二個值可以省略，如果省略則取默認(rèn)值為居中?？捎玫谋硎疚恢玫男问接校?/span>x%
可以用百分比來表示內(nèi)容在容器中顯示的位置。
示例
<body><img src="./demo.jpg" alt=""><style>img{width: 300px;height: 150px;object-fit: contain;object-position: 100% 0%;}</style></body>
left/right/top/bottom/center
可以使用方位值進(jìn)行設(shè)置。
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: right bottom;}</style>
具體的距離（包括數(shù)值和單位）
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: 50px 50px;}</style>
圖12-使用具體的距離進(jìn)行設(shè)置可以準(zhǔn)確明了的定位內(nèi)容在x軸和y軸上的位置，內(nèi)容超出容器的部分會被剪切
混合使用
指定內(nèi)容在容器內(nèi)的具體位置時，上述三種位置表示方法可以混合使用。
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: right 50px;}</style>
圖13-不同的位置表示方法可以混合使用，一樣會生效
initial
示例
<style>img{width: 300px;height: 150px;object-fit: contain;object-position: initial;}</style>
圖14-object-position屬性值默認(rèn)為居中顯示
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標(biāo)簽可以從父元素div處繼承object-position的屬性值，如圖，圖片不再默認(rèn)居中顯示，而是和div元素樣式中定義的一樣靠左顯示
寫在最后
本博文僅為學(xué)習(xí)記錄和分享交流，如有錯漏，還請幫忙指出，也歡迎更多補(bǔ)充，不勝感激。
最后
歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個專業(yè)的技術(shù)人...
