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

最新推荐文章于 2025-04-11 08:09:08 发布

_(:* ｣∠)_alray

最新推荐文章于 2025-04-11 08:09:08 发布

阅读量1w

点赞数 1

分类专栏： css 文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/weixin_41733299/article/details/121543396

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用CSS Flex布局使图片在div中自适应填充，避免图片拉伸变形。关键在于不设置img的高度和宽度，仅设置img宽度为100%，并配合div的display:flex、align-items:center及overflow:hidden属性，确保图片居中且在div内适应显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何让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这三个属性。