img自适应div,无拉伸,无变形
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这三个属性。
更多推荐
已为社区贡献1条内容
所有评论(0)