CSS中,對于圖片的鋪滿方式,有多種實現的方法,本文將對常見的兩種方法進行介紹。
方法一:background-size 屬性
background-size 屬性可以設置背景圖片的尺寸大小,其中包括兩個參數:width 和 height。其常用的屬性值有:
cover:完全覆蓋背景區域,并保持縱橫比例。
contain:盡可能縮放背景圖像,以便完全適合背景區域。
例如,下面的代碼可以使背景圖片完全鋪滿容器:
p { background: url(圖片地址) no-repeat center center fixed; background-size: cover; }參考效果如下: ![cover效果](https://i.loli.net/2021/06/30/C2jvPT4ouENdsgn.png) 方法二: object-fit 屬性 object-fit 屬性可以對替換元素(img,video等)進行更加直接的控制。 類似于 background-size 屬性,object-fit 也有 cover 和 contain 兩個參數。 例如,下面的代碼可以使 img 元素的圖片完全鋪滿容器:
p img { width: 100%; height: 100%; object-fit: cover; }參考效果如下: ![object-fit效果](https://i.loli.net/2021/06/30/WfMNj9zPiRZl2eL.png) 以上即是兩種常用的CSS圖片鋪滿方式,如需更加細致的控制也可以使用其他屬性進行實現。
下一篇http 支持php