如何使用 CSS 來(lái)讓一張圖片完全覆蓋整個(gè)元素？ 以下是三種方法：

/* 方法一：設(shè)置背景圖片 */
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: cover;
/* 方法二：將圖片作為元素的派生元素 */
position: relative;
overflow: hidden;
img {
position: absolute;
min-width: 100%;
min-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 方法三：將圖片作為元素 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;

方法一：設(shè)置背景圖片

在這種方法中，我們使用 CSS 背景屬性將所需的圖像設(shè)置為元素的背景。我們通過(guò)設(shè)置 background-size: cover 調(diào)整圖像的尺寸以確保它完全覆蓋元素。

方法二：將圖片作為元素的派生元素

這種方法是將所需圖像作為元素的派生元素，如下圖所示：

我們使用 position: relative 和 overflow: hidden 將 container 元素設(shè)為浮動(dòng)。img元素設(shè)置為絕對(duì)定位，并使用translate()方法將其水平居中和垂直居中。

方法三：將圖片作為元素

這種方法是將所需圖像作為元素而非背景，如下圖所示：

我們通過(guò)為 img 元素設(shè)置 position: absolute 和 object-fit: cover 對(duì)任何容器元素進(jìn)行寬高比例的自適應(yīng)。因此，img 元素與其所在元素相同大小并完全覆蓋它。