CSS圖片寬高設(shè)置詳解

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

1、使用width和height屬性

CSS中的width和height屬性可以直接設(shè)置圖片的寬度和高度，如果你想要將圖片的寬度設(shè)置為200px，高度設(shè)置為300px，你可以這樣寫：

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

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

與width和height不同，max-width和max-height屬性允許圖片在不超過指定寬度和高度的情況下，保持其原始比例，這在你想要限制圖片尺寸，但又不想改變其比例時(shí)非常有用。

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

3、使用object-fit屬性

object-fit屬性允許你更精細(xì)地控制圖片在容器內(nèi)的填充方式，如果你想要圖片完全填充容器，但又不想改變其比例，你可以使用object-fit屬性：

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

在這個(gè)例子中，圖片會(huì)盡可能地填充容器，但會(huì)保持其原始比例，不會(huì)變形。

4、使用CSS變量

如果你想要更靈活地控制圖片的寬高，可以使用CSS變量，你可以定義一個(gè)變量來設(shè)置圖片的寬度，然后在需要的地方使用這個(gè)變量：

:root {
    --img-width: 200px;
}
img {
    width: var(--img-width);
    height: auto;  /* 讓高度自動(dòng)調(diào)整以保持比例 */
}

在這個(gè)例子中，圖片的寬度會(huì)被設(shè)置為200px，而高度會(huì)自動(dòng)調(diào)整以保持圖片的比例不變。