<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img auto</title> <style> body { position: relative; } .parent { position: absolute; width: 100%; height: 100%; top:0; left: 0; right: 0; bottom: 0; } .item { float: left; width: 20%; margin: 10px 2.5%; height: 0; padding-bottom: 12.5%; background-color: #dbe0e4; background: url(gril.jpg) no-repeat; background-size: cover; } </style> </head> <body> <div class="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
利用padding撑开盒子大小，padding-bottom撑开子元素的高度，子元素宽度与高度成比例，这样就可以自适应了