CSS如何讓圖片變成100%

在CSS中，我們可以通過(guò)設(shè)置圖片的寬度和高度來(lái)讓圖片變成100%，這里有兩種方法可以實(shí)現(xiàn)：

1、使用百分比單位

我們可以將圖片的寬度和高度都設(shè)置為100%，這樣圖片就會(huì)充滿(mǎn)其所在的容器。

img {
  width: 100%;
  height: 100%;
}

2、使用vw和vh單位

vw和vh分別代表視口寬度的百分比和視口高度的百分比，我們可以將圖片的寬度設(shè)置為100vw，高度設(shè)置為100vh，這樣圖片就會(huì)充滿(mǎn)整個(gè)視口。

img {
  width: 100vw;
  height: 100vh;
}

需要注意的是，如果圖片本身的比例與容器或視口的比例不一致，那么圖片可能會(huì)被拉伸或壓縮，為了避免這種情況，我們可以在CSS中使用object-fit屬性來(lái)控制圖片在容器中的填充方式。

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

這樣，圖片就會(huì)在其容器中保持其原始比例，同時(shí)填充整個(gè)容器。