本文目錄導讀：

1. 圖片寬度和高度的基本控制
2. 保持圖片比例
3. 響應式設計

CSS在網頁設計中扮演著重要的角色，其中控制圖片寬度和高度是CSS的基本功能之一，本文將介紹如何通過CSS有效地控制圖片的寬度和高度，以達到良好的頁面布局和設計效果。

圖片寬度和高度的基本控制

在CSS中，我們可以使用width和height屬性來控制圖片的寬度和高度，這兩個屬性可以設定具體的像素值或者相對單位值，如百分比等。

img {
    width: 500px;  /* 控制圖片寬度為500像素 */
    height: 300px; /* 控制圖片高度為300像素 */
}

保持圖片比例

在調整圖片寬度和高度時，我們需要保持圖片的比例，否則圖片可能會變形，一種常見的方法是使用CSS的object-fit屬性，該屬性可以保持圖片的縱橫比，同時填充剩余的空間。

img {
    width: 100%;  /* 使圖片寬度占滿其父元素寬度 */
    height: auto; /* 使高度自動調整以保持圖片比例 */
    object-fit: cover; /* 保持圖片覆蓋整個元素區(qū)域，同時保持縱橫比 */
}

響應式設計

隨著響應式設計的普及，我們還需要考慮在不同設備和屏幕尺寸下如何控制圖片的寬度和高度，這時，我們可以使用媒體查詢（media queries）和百分比單位來控制圖片的寬度和高度。

img {
    width: 100%;  /* 在所有設備上使圖片寬度占滿其父元素寬度 */
    height: auto; /* 高度自動調整以保持比例 */
}
/* 針對大屏幕設備的樣式 */
@media screen and (min-width: 768px) {
    img {
        max-width: 600px; /* 在大屏幕設備上限制圖片的***大寬度 */
    }
}

通過CSS，我們可以輕松地控制圖片的寬度和高度，以達到良好的頁面布局和設計效果，在實際應用中，我們需要根據具體的需求和場景選擇合適的控制方法。