HTML怎么让IMG自动适应DIV容器大小
小编给大家分享一下HTML怎么让IMG自动适应DIV容器大小，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
为了让IMG自适应大小，如下我做了一个横向自适应的示例：
IMG样式（横向拉伸，纵向自动匹配大小）
DIV样式（元素居中显示）
IMG样式
（横向拉伸，纵向自动匹配大小）
width:100%; height:auto;（纵向拉伸，横向自动匹配大小）
width:auto; height:100%;DIV样式（元素居中显示）
display:flex; align-items:center; justify-content:center;做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：
img{ width:auto; height:auto; max-width:100%; max-height:100%;}这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
height:auto;图片的高度自己适应(图片有多高就显示多高)
width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
max-width:100%;图片的宽度不能超过图片所在的空间的宽度
max-height:100%;图片的高度不能超过图片所在的空间的高度
max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
示例代码
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示
<html><head><title>让图片自动适应DIV容器大小</title><style>.ShaShiDi{width:500px;height:400px;display:flex;align-items:center;justify-content:center; }.ShaShiDi img{ width:100%; height:auto;}</style></head><body> <div class="ShaShiDi"> <img class="lazy" data-src="./1.png"/> </div> <div class="ShaShiDi"> <img class="lazy" data-src="./2.png"/> </div></body></html>看完了这篇文章，相信你对“HTML怎么让IMG自动适应DIV容器大小”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
