样式

一、object-fit

---

1.1 object-fit:cover

object-fit:cover:保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。换句话说只保留中心内容

<div class='img-container' style='width:100px;height:100px;background-color: antiquewhite;'>
    <img style='width:100%;height:100%;object-fit:cover;' src="./83.jpg" alt="">
</div>

1.2 object-fit: container

object-fit: contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。换句话说图片将不形变地最大限度地完整显示在无形框内，且会居中显示。

<div class='img-container' style='width:100px;height:100px;background-color: antiquewhite;'>
    <img style='width:100%;height:100%;object-fit:contain;' src="./83.jpg" alt="">
</div>