CSS中的圖片自適應(yīng)是一個(gè)常見的需求，特別是在響應(yīng)式設(shè)計(jì)中，為了讓圖片在不同的設(shè)備和屏幕尺寸上都能正常顯示，我們可以使用CSS的媒體查詢和flexbox布局來實(shí)現(xiàn)。

我們需要給圖片一個(gè)固定的寬度和高度，這個(gè)寬度和高度可以根據(jù)設(shè)計(jì)需求來確定，

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

在這個(gè)例子中，圖片會(huì)被設(shè)置為100%的寬度，而高度則被設(shè)置為200像素，這樣，圖片就會(huì)根據(jù)容器的寬度來自動(dòng)調(diào)整大小，而高度則保持不變。

我們可以使用媒體查詢來根據(jù)屏幕尺寸來進(jìn)一步調(diào)整圖片的大小，如果我們要在小屏幕上顯示較小的圖片，可以使用以下代碼：

@media (max-width: 600px) {
  img {
    width: 100%;
    height: 150px;
  }
}

在這個(gè)例子中，當(dāng)屏幕寬度小于或等于600像素時(shí)，圖片的高度會(huì)調(diào)整為150像素，以適應(yīng)較小的屏幕。

除了媒體查詢，我們還可以使用flexbox布局來使圖片在容器中更加靈活地顯示，我們可以將圖片放置在一個(gè)flex容器中，并使用flex屬性來調(diào)整圖片的大小和位置：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100%;
  height: auto;
}

在這個(gè)例子中，圖片會(huì)被放置在一個(gè)居中的flex容器中，并根據(jù)容器的寬度來自動(dòng)調(diào)整大小，圖片的高度會(huì)自動(dòng)調(diào)整以保持其原始比例。

CSS提供了多種方法來使圖片在不同的設(shè)備和屏幕尺寸上都能正常顯示，我們可以根據(jù)具體的需求來選擇合適的方法來實(shí)現(xiàn)圖片的自適應(yīng)。