1. 程式人生 > >如何用純CSS將圖片填滿div,自適應容器大小,已有兩個不太完善的方案

如何用純CSS將圖片填滿div,自適應容器大小,已有兩個不太完善的方案

我有一個模板,想按常規做一個div裡面放置一個img圖片,並且讓圖片鋪滿容器,自適應容器大小。HTML結構程式碼如下(在這個盒模型上,我已經放置了一些不重要的樣式)。

<div style="height:270px;width:400px;border:2px black solid;">
    <a href="http://www.paipk.com"><img src="..." alt="拍拍看科技"></a>
</div>

現在我初步想了兩個方案,但都不是太完善的,想請高手幫忙參考下:

object-fit解決方法:

直接給img套用一個object-fit:cover;讓img填滿盒模型。

div img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

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

min方法:

這是我這兩天思考出來的,是通過對img元素垂直居中,並將它的高度和寬度設定一個最小滿屏值,這樣,也能讓圖片鋪滿容器:

div{
    position:relative;
    overflow:hidden;
}
div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

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