参考airbnb和hitour,得到以下demo,可以将图片高度固定后,图片自适应(特别适用于全屏的banner)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .x{ width:100%; height:700px; } .x div{ background-repeat: no-repeat; background-size: 100% 100%; height: 100%; width: 100%; position: relative; background-position: center center; background-size: cover; } </style> </head> <body> <div class="x"> <div style="background-image:url(http://i1.sinaimg.cn/gm/j/i/2011-10-09/U1782P115T41D234876F1162DT20111009144235.jpg)"></div> </div> </body> </html>