[CSS] 等比例縮放的框框

最近因為 RWD 的關係，以往很簡單可以做得等比例框框就會變得有些困難，研究了一下，用一些小技巧就可以讓框框可以根據版面等比例調整了。

範例就用制服地圖首頁的相片列表。

首先準備簡單的 html。

view plaincopy to clipboardprint

1. <li>  
2.     <div class="con">  
3.         <img src="imgURL">  
4.     </div>  
5. </li>  

我要做的效果就是等比例的相片列表，照片用 CSS 讓他可以變成封面而不用經過後端裁切，於是先讓 li 可以彈性排列。

view plaincopy to clipboardprint

1. li{      
2.     float:left;      
3.     position: relative;      
4.     width: 25%; //這邊可以自由調整一行要幾張      
5.     overflow: hidden;    
6.     padding-bottom:25%;     
7. }   

再這樣寫 CSS 就可以讓框框等比例縮放了。

view plaincopy to clipboardprint

1. li .con{   
2.     position:absolute;   
3.     height:99%;    
4.     width:99%;    
5.     padding:.5%;   
6. }  

而要讓框框可以自動將照片置中比遮掉長寬多出來的部分，只要加上以下 CSS 就好了。

view plaincopy to clipboardprint

1. li .con img{   
2.   width:100%;   
3.   height:100%;   
4.   object-fit: cover;   
5. }