實(shí)現(xiàn)方案：

.img-1 {

????width: 200px;

????height: 200px;

????object-fit: cover;

}

擴(kuò)展：object-fit的其它值

object-fit屬性還有值，下面以一張圖為例看看其他值戰(zhàn)士的效果

示例原圖（長(zhǎng)度大于寬度）：

object-fit: fill; //?中文釋義“填充”。默認(rèn)值。替換內(nèi)容拉伸填滿(mǎn)整個(gè)contentbox,不保證保持原有的比例。（比如下圖拉長(zhǎng)了）

object-fit: contain; //?中文釋義“包含”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會(huì)在容器內(nèi)留下空白。

object-fit: cover; //?中文釋義“覆蓋”。保持原有尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個(gè)和容器一致。因此，此參數(shù)可能會(huì)讓替換內(nèi)容（如圖片）部分區(qū)域不可見(jiàn)。

object-fit: none; //?中文釋義“無(wú)”。保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小。

object-fit: scale-down; //?中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個(gè)，此處呈現(xiàn)的是none的效果。

img標(biāo)簽實(shí)現(xiàn)和背景圖一樣的顯示效果只顯示圖片中間部分