css 實現多張圖片響應式水平排列自適應效果

本文轉載自查看原文 2016-04-28 16:39 9184 CSS

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             
 8             
 9             .test{
10                 float: left;
11                 width: 25%;
12                 box-sizing: border-box;
13                 padding: 10px;
14                 min-width: 150px;
15             }
16             
17             .container{
18                 width: 100%;
19             }
20             
21             @media (max-width:615px ) {
22                 .test{
23                     float: left;
24                     width: 33%;
25                     box-sizing: border-box;
26                     padding: 10px;
27                     min-width: 150px;
28                 }
29             }
30             
31             @media (max-width:465px ) {
32                 .test{
33                     float: left;
34                     width: 50%;
35                     box-sizing: border-box;
36                     padding: 10px;
37                     min-width: 150px;
38                 }
39             }
40             
41             @media (max-width:315px ) {
42                 .test{
43                     float: left;
44                     width: 100%;
45                     box-sizing: border-box;
46                     padding: 10px;
47                     
48                 }
49             }
50             
51         </style>
52     </head>
53     <body>
54         
55         <div class="container">
56             <div class="test" >
57                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>
58             </div>
59             <div class="test" >
60                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
61             </div>
62             <div class="test" >
63                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
64             </div>
65             <div class="test" >
66                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
67             </div>
68         </div>
69         
70     </body>
71 </html>

效果圖如下：

1.使用響應式圖片：為圖片添加 max-width:100%

2.設置圖片最小寬度，當屏幕寬度不夠時，圖片會排成2行甚至多行

3.使用媒體查詢處理當一張圖片擠到下一行時，留下的空白位置

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 圖片自適應瀏覽器窗口寬度——就是響應式圖片等比縮放效果如何實現自適應頁面 (響應式布局) bootstrap 響應式圖片自適應圖片大小 CSS響應式字體，自適應視圖窗口大小將一堆圖片自適應頁面排列 CSS實現輸入框寬度隨內容自適應效果響應式布局和自適應布局詳解響應式布局和自適應布局詳解自適應和響應式區別以及寫法 css3 flex流動自適應響應式布局實例轉