img自适应div大小 铺满且不变形,img标签自适应大小

　　为了使IMG适应大小，我举了一个横向适应的例子如下：

　　IMG风格(横向拉伸，纵向自动尺寸匹配)

　　DIV样式(元素居中)IMG样式

　　(横向拉伸，纵向自动尺寸匹配)

　　宽度：100%；高度：自动；(垂直拉伸，水平自动匹配大小)

　　宽度：自动；身高：100%；DIV样式（元素居中显示）

　　显示器：flex对齐-项目：居中；justify-content:居中；方法很简单，只需设置对应图片的width和htight的具体值即可。请看下面的例子：

　　img { width:auto；高度：自动；最大宽度：100%；最大高度：100%；}如果这样设置图片，可以让图片在指定的空间缩放。第4行的意思是：

　　宽度：自动；图片宽度自适应(图片按原样显示)高度：auto图片高度自适应(图片高度显示为多高就有多高)宽度：auto和高度：auto一起使用表示显示图片的原始大小(可以理解为没有效果)。最大宽度：100%；图片的宽度不能超过图片所在空间的宽度max-height:100%；图片的高度不能超过图片所在空间的高度max-width:100%；最大高度：100%；在一起使用时，表示这张图片的宽度和高度不能超过其所在空间的宽度和高度。示例代码

　　下面是两张大小比例不同的图。使用这种方法，图片可以自动填充并显示在中央。

　　Htmlheadtitle自动使图片适应DIV容器大小/title style . Shashi di { width:500 px；高度：400px显示器：flex对齐-项目：居中；justify-content:居中；/*为了效果明显，可以打开下面的边框看一下效果*//*边框：1px纯黑；*/}.沙希迪img{宽度：100%；高度：自动；}/style/head body DIV class= Shashi di IMG src=。/1 . png /DIV DIV class= Shashi di img src=。/2.png/div/body/HTML以上是HTML如何让IMG自动适应div容器大小的详细内容。更多关于HTML IMG自动适配div的信息，请关注其他相关文章。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。