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

版权声明：本文为博主原创文章，未经博主允许不得转载。作者：沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946
HTML如何让IMG自动适应DIV容器大小
为了让IMG自适应大小，如下我做了一个横向自适应的示例：

IMG样式（横向拉伸，纵向自动匹配大小）
DIV样式（元素居中显示）
IMG样式（横向拉伸，纵向自动匹配大小）
width:100%;
height:auto;
1
2
DIV样式（元素居中显示）
display:flex;
align-items:center;
justify-content:center;
1
2
3
示例代码如下：
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

---------------------
作者：沙振宇
来源：CSDN
原文：https://blog.csdn.net/u014597198/article/details/80403946?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！

巴特西

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

最新文章

热门文章