为了让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; /*为了效果明显,可以将如下边框打开,看一下效果*/ /* border:1px solid black; */ } .ShaShiDi img{ width: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的资料请关注其它相关文章!
标签:
HTML,IMG,自适应DIV
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“HTML如何让IMG自动适应DIV容器大小的实现方法”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]