CSS是網頁設計中重要的一部分，它可以讓網頁更加美觀和易于閱讀。其中一個重要的應用就是圖片自適應。

我們常常會在網頁中使用圖片來豐富內容，但是圖片的大小和比例都不盡相同。如果所有的圖片都設置了固定的寬度和高度，那么在不同的設備和屏幕上顯示時就會存在問題。

為了解決這個問題，CSS提供了多種方式來實現圖片自適應。

1. 使用max-width屬性

img {
max-width: 100%; /* 圖片的最大寬度為父元素的100% */
height: auto; /* 高度自適應 */
}

2. 使用object-fit屬性

img {
width: 100%;
height: 200px;
object-fit: cover; /* 圖片按照比例填充父元素 */
}

3. 使用background-size屬性

div {
background-image: url(image.jpg);
background-size: cover; /* 背景圖片按照比例填充元素 */
background-repeat: no-repeat;
background-position: center center;
}

無論使用哪種方法，圖片都可以根據父元素的大小和比例自適應。這不僅提高了網頁的視覺效果，也讓網頁在不同的屏幕上都有良好的表現。