當我們給img标簽加上固定的寬和高時，img标簽中的圖檔會預設被拉伸變形，如圖：
圖1-給img元素加上固定寬高後圖檔被拉伸變形
代碼如下：
<body>
<img src="./demo.jpg" alt="">
<style>
img{
width: 300px;
height: 150px;
}
</style>
</body> 如果我們需要讓該元素占據固定的寬高大小，而又不希望圖檔被拉伸變形，可以在img标簽外套一個div（或其他父級元素），然後将固定的寬高加在父級元素上，這樣img标簽本身就可以隻設定寬或高，讓另一邊自适應。
除此之外，還可以将該圖檔作為元素背景，然後通過background-size和background-position等背景相關樣式屬性來設定該圖檔顯示的位置和大小。
但這些方法要麼看上去頗為不便，要麼并不适用于video标簽中的視訊元素。
為了更好且更友善地解決這類問題，我們可以使用接下來的這兩個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元素樣式中定義的一樣靠左顯示
寫在最後
以上為全部内容，感謝閱讀。
本博文僅為學習記錄和分享交流，如有錯漏，還請幫忙指出，也歡迎更多補充，不勝感激。
本文完〜