CSS如何讓圖片自適應(yīng)？

在CSS中，我們可以使用多種方法來使圖片自適應(yīng)，以下是一些常見的方法：

1、使用百分比寬度：

我們可以將圖片的寬度設(shè)置為一個百分比值，這樣圖片就會根據(jù)其父元素的寬度來自動調(diào)整寬度了，如果我們想要讓圖片占據(jù)其父元素的50%寬度，我們可以這樣寫：

img {
  width: 50%;
}

2、使用max-width屬性：

max-width屬性可以限制圖片的***大寬度，如果我們想要讓圖片在不超過其原始寬度的情況下自適應(yīng)，我們可以這樣寫：

img {
  max-width: 100%;
}

3、使用object-fit屬性：

object-fit屬性可以改變圖片在容器中的填充方式，如果我們想要讓圖片在容器中保持其原始的長寬比，我們可以這樣寫：

img {
  object-fit: contain;
}

4、使用flex布局：

我們還可以使用CSS的flex布局來使圖片自適應(yīng)，通過設(shè)定flex容器的寬度和高度，以及flex子元素的寬度和高度，我們可以輕松地使圖片根據(jù)其容器的大小來自動調(diào)整大小，如果我們想要讓圖片占據(jù)其父元素的全部空間，我們可以這樣寫：

.container {
  display: flex;
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}