圖片自適應容器大小
阿新 • • 發佈：2018-12-06
div eight margin pan parent img ack code 寬度
<!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撐開子元素的高度，子元素寬度與高度成比例，這樣就可以自適應了
圖片自適應容器大小