CSS中,我們可以使用背景圖片來(lái)讓圖片剛好覆蓋,以下是一個(gè)簡(jiǎn)單的例子:
div { width: 300px; height: 200px; background-image: url('image.jpg'); background-size: cover; }
在這個(gè)例子中,我們?cè)O(shè)置了一個(gè)div的寬度為300px,高度為200px,并將背景圖片設(shè)置為image.jpg,通過(guò)background-size屬性,我們可以控制圖片的大小,使其剛好覆蓋整個(gè)div。
除了使用背景圖片,我們還可以使用CSS的position屬性來(lái)定位圖片,并將其設(shè)置為***定位,這樣,圖片就可以根據(jù)我們的需求來(lái)放置,并且可以確保圖片始終在可視范圍內(nèi)。
div { position: relative; width: 300px; height: 200px; } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
在這個(gè)例子中,我們?cè)O(shè)置了一個(gè)div的寬度為300px,高度為200px,并將一個(gè)img元素作為其子元素,通過(guò)position屬性,我們可以將img元素設(shè)置為***定位,并將其top和left屬性設(shè)置為0,這樣它就會(huì)始終位于div的左上角,我們將img元素的width和height屬性設(shè)置為100%,這樣它就會(huì)始終填充整個(gè)div的寬度和高度,確保圖片剛好覆蓋整個(gè)div。