很多讲解图片自适应的方法都是将图片作为容器的背景图,通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在div中的img,将img自适应它的父容器div。

html结构:

<div class="imgWrap">
    <img src="test.png">
</div>

首先需要图片在父容器中居中显示,使用flex布局

.imgWrap{
    display: flex;
    justify-content: center;
    align-items: center;
}

再针对img图片设置宽高,设置宽度100%或者高度100%,可以让图片跟随父容器依据宽度或者高度改变尺寸。如果同时设置宽度和高度为100%,会使图片拉伸填充整个父容器,这时候图片会有可能模糊失真。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐