【Web】HTML如何让IMG自动适应DIV容器大小

沙振宇

已于 2023-12-19 17:06:17 修改

阅读量10w+

点赞数 36

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： Html img div 自适应大小

于 2018-05-22 12:21:12 首次发布

本文链接：https://blog.csdn.net/u014597198/article/details/80403946

Web 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种简单的方法，使图片能自动适应其所在的DIV容器大小，并保持原始宽高比，确保图片无论尺寸如何都能完美展示。

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

HTML如何让IMG自动适应DIV容器大小

为了让IMG自适应大小，如下我做了一个横向自适应的示例：

IMG样式（横向拉伸，纵向自动匹配大小）
DIV样式（元素居中显示）

IMG样式

（横向拉伸，纵向自动匹配大小）

	width:100%;
	height:auto;

（纵向拉伸，横向自动匹配大小）

	width:auto;
	height:100%;

DIV样式（元素居中显示）

	display:flex;
	align-items:center; 
	justify-content:center;

示例代码

如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示

<html>
<head>
<title>让图片自动适应DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
			/*为了效果明显，可以将如下边框打开，看一下效果*/
			/* border:1px solid black; */
}

.ShaShiDi img{
	width:100%;
	height:auto;
}

</style>
</head>
<body>
	<div class="ShaShiDi">
		<img src="./1.png"/>
	</div>
	<div class="ShaShiDi">
		<img src="./2.png"/>
	</div>
</body>
</html>

关注博主即可阅读全文