純CSS將圖片填滿div,自適應div容器大小的兩種方法

純CSS將圖片填滿div,自適應div容器大小的兩種方法

object-fit解決方法

 


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

這個方法很簡單也很實用,也符合理論上對盒模型和IMG容器的解釋。因為img本來也是一個容器,只不過它是公認的用來引導圖片的容器,用替換法把圖片替換成覆蓋的尺寸就是我要的效果。這個思路在理論上都是正確的。但由於是新程式碼,在一些瀏覽器上還不相容。回退機制上,如果瀏覽器不認識object-fit,那整個圖片就會被強制拉伸成容器的尺寸。所以在回退機制上有待解決!

min方法:


  1. div{   
  2.     position:relative;   
  3.     overflow:hidden;   
  4. }   
  5. div img{   
  6.     positionabsolute;   
  7.     top: 50%;   
  8.     left: 50%;   
  9.     displayblock;   
  10.     min-width: 100%;   
  11.     min-height: 100%;   
  12.     transform:translate(-50%,-50%);   
  13. }  

圖片高度或寬度任意一尺寸小於容器時,這個情況是正常的,但如果圖片的高度和寬度尺寸都大於容器,圖片也能鋪滿,但容器就只顯示大圖的中間部分。這就是這個方法的缺陷。

評論 (0)

此處尚未發表評論

留言

  1. 以遊客身份發表評論。 註冊登入到您的帳戶。
附件 (0 / 3)
分享您的位置