为了让img自适应大小，如下我做了一个横向自适应的示例：
img样式（横向拉伸，纵向自动匹配大小）img样式
（横向拉伸，纵向自动匹配大小）
width:100%; height:auto;
（纵向拉伸，横向自动匹配大小）
width:auto; height:100%;
div样式（元素居中显示）
display:flex; align-items:center; justify-content:cen安居乐业ter;
做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：
img{ width:auto; height:auto; max-width:100%; max-height:100%;}这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
width:auto;图片的宽度自己适应(图片有多宽就显示多宽)heigh英国人的名字t: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; /*为了效果明显，可以将如下边框打开，看一下效果*/ /* border:1px solid black;盐亭中学 */}.shashidi img{ wi讲普通话dth: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的资料请关注www.887551.com其它相关文章！
本文发布于:2023-04-07 09:23:24，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/688067781d3524bebfd7e00bea697bbb.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML如何让IMG自动适应DIV容器大小的实现方法.doc
本文 PDF 下载地址：HTML如何让IMG自动适应DIV容器大小的实现方法.pdf
| 留言与评论（共有 0 条评论） |
