當(dāng)UI出好圖時(shí)，圖片的格式都是有一定比例。但是你不知道的是從后臺(tái)拉取的圖片到底是什么比例的。
如果給圖片寫死寬高的話，就會(huì)出現(xiàn)圖片變形的問題。這個(gè)時(shí)候產(chǎn)品就會(huì)找你說話了。。。

目前的處理有兩種方式

１，通過背景圖的方式處理。通過background-size作用在容器上
<div class="img_background" style="background-image: url('2.jpg');"></div>

.img_background{
? ? ? width: 300px;
? ? ? height: 200px;
? ? ? border: 1px solid red;
? ? ? background:url('default.jpg') no-repeat center;
? ? ? background-size: cover;
}

2，對(duì)圖片使用使用object-fit:cover(推薦使用)
<div class="img_fit">
? ? <img src="2.jpg"/>
</div>

.img_fit{
? ? ? width: 300px;
? ? ? height: 200px;
? ? ? border: 1px solid red;? ? ?
}

.img_fit img{
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? -o-object-fit: cover;
? ? ? object-fit: cover;
}