我們?cè)趯?xiě)一些布局的時(shí)候，經(jīng)常會(huì)碰到圖片的伸縮情況，這個(gè)時(shí)候可以通過(guò)object-fit來(lái)快速設(shè)置

object-fit使用說(shuō)明
object-fit 屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度與寬度。
object-fit 一般用于 img 和 video 標(biāo)簽，一般可以對(duì)這些元素進(jìn)行保留原始比例的剪切、縮放或者直接進(jìn)行拉伸等。

1、object-fit: fill

默認(rèn)，不保證保持原有的比例，內(nèi)容拉伸填充整個(gè)內(nèi)容容器

object-fit: fill.png

2、object-fit: contain

保持原有尺寸比例。內(nèi)容被縮放

object-fit: contain.png

3、object-fit: cover

保持原有尺寸比例。但部分內(nèi)容可能被剪切。垂直居中

左：object-fit: cover.png，右：原圖

4、object-fit: none

保留原有元素內(nèi)容的長(zhǎng)度和寬度，也就是說(shuō)內(nèi)容不會(huì)被重置。左右垂直居中

左：object-fit: none.png， 右：原圖

5、object-fit: scale-down

保持原有尺寸比例。內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰(shuí)得到的對(duì)象尺寸會(huì)更小一些。

contain .png，圖片實(shí)際大小：956*525，邊框大小：200*100

none.png，圖片實(shí)際大?。?0*80，邊框大?。?00*100