img自适应div，无拉伸，无变形

如何让img自动适应div

思想逻辑为：

1.img不设置高度，宽度限制

2.在div里面使用居中

<div class="div">
    <img src="这是一个图片.png">
</div>

.div {
	background: #FFFFFF;
	width: 200px;
	height: 300px;
	overflow: hidden;//img如果超出这个div会隐藏超出部分
	display: flex;//flex布局
	align-items: center;//让img放在div的中间，居中
}
.div img {
	width: 100%;
//img的css不需要设置高度，只需要宽度，（其实只需要高度，不设置高度也可以）ʅ(‾◡◝)ʃ
}

总结：最重要的就是不能把img的宽高设置的跟父级div的宽高一样，不然很容易会图片拉伸变形，其次就是父级div需要overflow，display，align-items这三个属性。