img自适应父容器

很多讲解图片自适应的方法都是将图片作为容器的背景图，通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在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%，会使图片拉伸填充整个父容器，这时候图片会有可能模糊失真。