在处理自适应的时候,就拿图片来说吧,因为图片的尺寸可能不一样,同时height用百分比的时候不好形成想要的效果,要实现同样的宽和高,一般情况下可能考虑js来实现,
这里给介绍一个可行的方法,那就是借助padding来实现,
需要注意的是:
1、adding的top/right/bottom/left四项都是参考的父容器的宽度;
2、padding存在的时候 哪怕overflow为hidden,此时padding部分的内容是可以显示的,
来看具体的实例代码,将四张尺寸不一致的图实现等宽等高显示,
<style type="text/css"> *{margin:0; padding:0;} .box{ width:100%;} p{ width:25%; display:block; float:left;} a{display:block; margin:0 2%; height:0; padding-bottom:63.7333%; background-color:red; position:relative; } img{position:absolute; width:100%; height:100%; } a img{ border:0;} /* 1、padding(top/right/bottom/left) % 时,都是相对父元素的 Width 2、a的margin 是相对于p的, 3、此处四张图尺寸不一样 */ </style> </head> <body> <h1 style='text-align:center; line-height:30px; padding:20px 0;'>改变窗口尺寸试试</h1> <div class="box"> <p> <a> <img src="1.jpg"/> </a> </p> <p> <a> <img src="2.jpg"/> </a> </p> <p> <a> <img src="3.jpg"/> </a> </p> <p> <a> <img src="4.jpg"/> </a> </p> </div> <div style="clear:both; padding:20px;"> 兼容:Firefox、Webkite、Opera、Safari、IE8+ </div>