CSS中,我們可以使用width
和height
屬性來讓圖片顯示固定大小,這兩個(gè)屬性可以指定圖片的寬度和高度,從而限制圖片的大小。
如果我們想要讓一張圖片的寬度為200像素,高度為300像素,我們可以這樣寫:
img { width: 200px; height: 300px; }
這樣,無論圖片原來的大小是多少,它都會被縮放或拉伸到200像素寬和300像素高。
需要注意的是,如果圖片的長寬比與指定的長寬比不一致,圖片可能會變形,為了避免這種情況,我們可以在設(shè)置寬度和高度的同時(shí),也設(shè)置object-fit
屬性為cover
或contain
。
cover
選項(xiàng)會保持圖片的寬高比,但可能會裁剪一部分圖片。
contain
選項(xiàng)會保證圖片不被裁剪,但可能會在圖片的周圍留下一些空白。
如果我們想要讓一張圖片保持寬高比,并且寬度為200像素,高度為300像素,我們可以這樣寫:
img { width: 200px; height: 300px; object-fit: cover; }
這樣,圖片就會按照指定的寬度和高度進(jìn)行縮放,同時(shí)保持寬高比,不會被裁剪。