在开发过程中,图片在不同设备之间的展示效果总是有各种各样的问题,为了让图片在不同的设备有更好的展示效果,我从网上看了很多方式,其中有一个方式很适合我的应用场景,特此记录一下

html代码

<div class="img-div">
  <img class="img-fit"/>
</div>

首先,我要让div的高度等于div的宽度, 然后,通过position: relative和position: absolute让图片适应于div,最后设定图片的宽高和适应方式(object-fit)

css代码

.img-div {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.img-fit {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

其中图片的适应方式(object-fit)有五种

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。 内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。