脚本宝典收集整理的这篇文章主要介绍了HTML如何让IMG自动适应DIV容器大小的实现方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
为了让img自适应大小，如下我做了一个横向自适应的示例：
IMG样式
（横向拉伸，纵向自动匹配大小）
width:100%; height:auto;
（纵向拉伸，横向自动匹配大小）
width:auto; height:100%;
DIV样式（元素居中显示）
做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
示例代码
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示
<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>
以上就是HTML如何让IMG自动适应DIV容器大小的实现方法的详细内容，更多关于HTML IMG自动适应DIV的资料请关注脚本宝典其它相关文章！
以上是脚本宝典为你收集整理的HTML如何让IMG自动适应DIV容器大小的实现方法全部内容，希望文章能够帮你解决HTML如何让IMG自动适应DIV容器大小的实现方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。