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

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

* IMG样式(横向拉伸,纵向自动匹配大小)
* DIV样式(元素居中显示)
IMG样式(横向拉伸,纵向自动匹配大小)
width:100%; height:auto;
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>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信