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

  • A+
所属分类:CSS|Html
广告也精彩

HTML如何让IMG自动适应DIV容器大小
为了让IMG自适应大小,如下我做了一个横向自适应的示例:

IMG样式(横向拉伸,纵向自动匹配大小)
DIV样式(元素居中显示)
IMG样式
(横向拉伸,纵向自动匹配大小)
width:100%;
height:auto;
1
2
(纵向拉伸,横向自动匹配大小)
width:auto;
height:100%;
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" alt="HTML如何让IMG自动适应DIV容器大小"/>
</div>
<div class="ShaShiDi">
<img src="./2.png" alt="HTML如何让IMG自动适应DIV容器大小"/>
</div>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「沙振宇」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u014597198/article/details/80403946

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论!