<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> body{ margin: 0; } li{ list-style: none; float: left; position: relative; width: 25%; padding-top: 16.67%; /*全靠padding-top撑高度 这个值 = 图片宽度的百分比(高/宽)*/ } li img{ width: 100%; padding: 10px; top: 0; height: 100%; position: absolute; box-sizing: border-box; } </style> </head> <body> <div class="demo"> <div class="wrap"> <ul> <li><img src="http://imgst-dl.meilishuo.net/pic/_o/84/a4/a30be77c4ca62cd87156da202faf_1440_900.jpg"/></li> <li><img src="http://img.club.pchome.net/kdsarticle/2013/11small/21/fd548da909d64a988da20fa0ec124ef3_1000x750.jpg"/></li> <li><img src="http://d05.res.meilishuo.net/pic/l/f0/da/60f12fb56faf727c9530984b6853_500_331.jpg"/></li> <li><img src="http://img6.faloo.com/picture/0x0/0/183/183379.jpg"/></li> <div style="clear: both;"></div> </ul> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 http://runjs.cn/detail/1ckuprzi 转载请注明：有爱前端 » 不固定高度的任何图片自适应 喜欢 (0)or分享 (0)
