CSS3中,可以使用background-size
屬性來讓圖片滿屏,具體步驟如下:
1、將圖片的URL設(shè)置到元素的background-image
屬性中。
2、使用background-size
屬性來指定圖片的大小,如果想要讓圖片寬度和高度都填滿元素,可以設(shè)置background-size
為100% 100%
。
3、確保元素的寬度和高度都設(shè)置為auto
,以便元素能夠根據(jù)圖片的大小自動調(diào)整。
以下是一個示例代碼:
<div style="background-image: url('image.jpg'); background-size: 100% 100%; width: auto; height: auto;"></div>
在這個示例中,圖片image.jpg
會被設(shè)置為元素的背景圖片,并且會根據(jù)元素的寬度和高度自動縮放以填充整個元素,注意,如果圖片的原始寬高比與元素的寬高比不一致,那么圖片可能會被拉伸或壓縮以填充元素,如果需要保持圖片的原始寬高比,可以使用background-size: cover;
來替代100% 100%
,這樣圖片就會被裁剪并縮放以填充元素,同時保持其原始寬高比。