圖片布局在前端很多時候的時候因為圖片本身大小長寬比例不同，想要布局得好看，需要注意幾點問題，下面寫一寫怎么布局，主要講的是<img>元素，需要自己定制形狀的可以考慮canvas，前面有講。
先看看<img>默認布局的特點，<img>是行內元素，不設置大小的時候按圖片原本大小顯示，每個<img>之間有一個字的間隙，會換行。vertical-align的默認值是baseline。
可以設置vertical-align或者設置img的寬高，設置img的寬和高有以下三種方法：
-
-
-
- 設置寬，高度自適應，適合垂直布局
- 設置高，寬度自適應，適合水平布局
- 同時設置寬和高，會產生拉伸變形，不推薦
-
-
1、水平布局
百度圖片采用的就是這個方法，設置圖片的高。
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="css/myscroll.css"> <style> .image-container{ width:90%; margin:0 auto; } .image-container>img{ margin-top:10px; height:300px; } </style> </head> <body> <div class="image-container"> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </body> </html>
2、垂直布局
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="css/myscroll.css"> <style> .image-container{ width:90%; margin:0 auto; } .image-container>div{ display:inline-block; width:30%; vertical-align:top; } .image-container>div>img{ margin-top:10px; width:100%; } </style> </head> <body> <div class="image-container"> <div> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> </div> <div> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> </div> <div> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </div> </body> </html>
3、鼠標懸浮在圖片上面圖片變大
利用css的transform來進行設置，純html+css就可以實現，不過img還是受限於外面的容器，如果外部的div有overflow:hidden；img就算放大也會被截掉一部分。下附完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ margin:10% auto; } div>img{ cursor: pointer;/*手*/ transition: all 0.6s; } div>img:hover{ transform: scale(1.5); } </style> </head> <body> <div> <img src='img/10.png' width="300px" height="300px"/> <img src='img/9.png' width="300px" height="300px"/> <img src='img/8.png' width="300px" height="300px"/> <img src='img/7.png' width="300px" height="300px"/> </div> </body> </html>
4、顯示在一行之中進行滾動播放
包括了hidden滾動條，另外設置滾動條件
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .image-container{ width:90%; height:285px; overflow:hidden; margin:100px auto; margin-bottom:0; } .image-container>.imgs{ height:300px; width:100%; white-space: nowrap;/*強制不換行*/ overflow-x:auto; overflow-y:hidden; } .image-container>.imgs>img{ height:100%; } .command-container{ width:90%; height:15px; margin:0 auto; text-align:center; } .command-container>.command-button{ background:#009688; color:white; padding:10px; display:inline-block; width:50px; border-radius:5px; } .command-container>.command-button:hover{ background:#119999; //background:#5FB878; } </style> </head> <body> <div class="image-container"> <div class="imgs"> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </div> <div class="command-container"> <div class="command-button">上翻</div> <div class="command-button">下翻</div> </div> <script> window.onload=function(){ var buttons = document.getElementsByClassName('command-button'); var img = document.getElementsByClassName('imgs')[0]; var container = document.getElementsByClassName('image-container')[0]; buttons[0].addEventListener('click',function(){ var left = container.offsetWidth*0.5; img.scrollLeft = img.scrollLeft-left; //console.log(img.scrollWidth); }); buttons[1].addEventListener('click',function(){ var left = container.offsetWidth; img.scrollLeft = img.scrollLeft+left; //console.log(img.scrollWidth); }); } </script> </body> </html>