[CSS] 等比例縮放的框框



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

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

首先準備簡單的 html。

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

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

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


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

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


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

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

留言

Niall Chen寫道…
非常謝謝您,您的文章解決了我的問題!