更新时间：2023-02-02 文章分类：网页技术课堂
有的时候在制作自适应网页时，DIV盒子是自适应，图片也想要自适应按宽高比例进行展示，这里我们以banner自适应不同浏览器尺寸为例，页面HTML代码如下：
<div class="banner"><img src="img/banner.jpg"></div>
这样只是在一个div里面放了一张图片，那么如何让这张图片的宽高比固定呢？
图片宽度自适应，可以直接设置width为100%，高度这里我们可以用padding帮忙解决。
这里我们可以通过这个方法来计算：图片宽度 / 图片的宽高比例 = 值。
我们右键图片查看图片的原始大小，例如图片尺寸为800*200px，那么可以得出宽高比为4比1。
所以我们可以把.banner的padding-bottom 或 padding-top的值设置为 100% / 4 = 25%.
最终CSS部分代码如下：
网页定做咨询
*{margin:0;padding:0;}.banner{width:100%;padding-bottom:31.25%;position:relative;}.banner > img{position:absolute;width:100%;height:100%;left:0;top:0;}
个人博客网页 | 抗疫健康网页 | 保护动物网页 | 宠物花草网页 | 家乡旅游网页 | 人物明星网页 | 节日环保网页 | 影视音乐网页 | 校园班级网页 | 动漫游戏网页 | 文学文化网页 | 电子商务网页
STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...
