在开发过程中,图片在不同设备之间的展示效果总是有各种各样的问题,为了让图片在不同的设备有更好的展示效果,我从网上看了很多方式,其中有一个方式很适合我的应用场景,特此记录一下
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
中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。