CSS 如何讓 img 鋪滿 當(dāng)我們在網(wǎng)頁中插入一張圖片時，有時候希望圖片能夠鋪滿整個容器，實現(xiàn)最大化利用空間的效果，那么怎樣才能做到呢？ 使用 CSS 的 `object-fit` 屬性可以很容易地實現(xiàn)圖片鋪滿容器的效果。該屬性有以下幾個可選值： - `fill`：拉伸填充容器，可能會導(dǎo)致圖片變形。 - `contain`：保持長寬比放大或縮小圖片來完全適應(yīng)容器，不會變形。 - `cover`：保持長寬比放大或縮小圖片來填充容器，可能會裁剪圖片。 - `none`：不改變圖片尺寸。 - `scale-down`：保持長寬比縮小圖片以適合容器大小，也可以放大圖片。 下面我們來看一個例子。假設(shè)有以下 HTML 和 CSS： ```html

圖片鋪滿容器

``` 其中 `container` 為容器，`width` 和 `height` 分別設(shè)置容器的寬和高，`img` 的寬和高都設(shè)置為 100%，這樣圖片就會和容器一樣大，`object-fit` 設(shè)置為 `cover`，即填充容器，并可能裁剪圖片。 預(yù)覽效果如下：

圖片鋪滿容器

在這里你還可以嘗試一下其他幾個 `object-fit` 的值，看看會有什么效果。 希望這篇文章對你有所幫助。