HTML让IMG自动适应DIV容器大小实现代码

本篇文章小编给大家分享一下HTML让IMG自动适应DIV容器大小实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

IMG样式（横向拉伸，纵向自动匹配大小）

DIV样式（元素居中显示）

IMG样式

（横向拉伸，纵向自动匹配大小）

css;"> 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%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

示例代码

如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示