CSS圖片高寬設置詳解

在CSS中，我們可以使用多種方法來設置圖片的高度和寬度，以下是一些常見的方法：

1、使用height和width屬性

這是***簡單的方法，只需在CSS規(guī)則中添加height和width屬性即可，如果您想將圖片的高度設置為200像素，寬度設置為300像素，可以這樣做：

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

2、使用max-height和max-width屬性

這些屬性允許您設置圖片的***大高度和***大寬度，如果圖片本身的高度或?qū)挾却笥谶@些值，那么圖片將被縮放以適應這些尺寸限制。

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

3、使用min-height和min-width屬性

與max-height和max-width相反，這些屬性設置圖片的***小高度和***小寬度，如果圖片本身的高度或?qū)挾刃∮谶@些值，那么圖片將被放大以適應這些尺寸限制。

img {
    min-height: 200px;
    min-width: 300px;
}

4、使用object-fit屬性

object-fit屬性允許您控制圖片在容器中的填充方式，如果您想讓圖片完全填充容器，可以使用以下代碼：

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

圖片的高度和寬度都設置為100%，這意味著圖片將完全填充其容器，object-fit屬性設置為cover，這意味著圖片將被裁剪以適應其容器，保持其寬高比不變。

希望這些方法能幫助您更好地控制CSS中圖片的高度和寬度。