CSS让图片自动适应div大小

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

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 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。