本文目錄導(dǎo)讀：

1. 使用CSS設(shè)置圖片高寬
2. 保持圖片原始比例
3. 響應(yīng)式設(shè)計

CSS照片統(tǒng)一高寬的方法

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要處理圖片，而讓圖片保持統(tǒng)一的高寬是一個常見的需求，通過CSS，我們可以輕松地實現(xiàn)這一目標(biāo)。

使用CSS設(shè)置圖片高寬

我們可以通過CSS的height和width屬性來設(shè)置圖片的高寬，如果我們希望所有的圖片都是100px高，200px寬，我們可以這樣寫CSS：

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

這樣，所有的圖片都會變成100px高，200px寬。

保持圖片原始比例

我們可能希望保持圖片的原始比例，而不是強制改變它的尺寸，在這種情況下，我們可以使用CSS的max-height和max-width屬性，來限制圖片的***大尺寸，同時保持其原始比例：

img {
    max-height: 100px;
    max-width: 200px;
}

這樣，圖片會在保持原始比例的同時，盡可能填充給定的空間。

響應(yīng)式設(shè)計

在響應(yīng)式設(shè)計中，我們可能需要讓圖片在不同設(shè)備上都能***顯示，這時，我們可以使用CSS的object-fit屬性來控制圖片的填充方式：

img {
    height: 100px;
    width: 200px;
    object-fit: cover;
}

這樣，圖片會在保持原始比例的同時，盡可能填充給定的空間，而不會變形。

通過以上方法，我們可以輕松地使用CSS來控制圖片的高寬，使其在各種設(shè)備上都能***顯示。