HTML如何让IMG自动适应DIV容器大小的实现方法HTML中img标签只显示图片中心位置的方法(三种方法)详解HTML/XHTML中img图像标签的基本用法在html的img src=""中调用js函数或js变量来动态指定图片路径HTMLimg标签的alt属性和title属性使用介绍解决html 图片img加超链接后产生难看的蓝色边框问题

为了让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如何让IMG自动适应DIV容器大小的实现方法的详细内容，更多关于HTML IMG自动适应DIV的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！