在CSS中,可以使用width
和height
屬性來(lái)縮小圖片,這些屬性可以指定圖片在網(wǎng)頁(yè)上的寬度和高度。
如果要將圖片縮小到原來(lái)的50%,可以編寫(xiě)如下代碼:
img { width: 50%; height: 50%; }
這將使所有<img>
元素在網(wǎng)頁(yè)上的寬度和高度都縮小到原來(lái)的50%。
也可以使用max-width
和max-height
屬性來(lái)限制圖片的***大寬度和高度。
img { max-width: 500px; max-height: 300px; }
這將使所有<img>
元素在網(wǎng)頁(yè)上的***大寬度限制為500像素,***大高度限制為300像素,如果圖片原始尺寸超過(guò)這些限制,那么圖片將按照比例縮小到這些限制之內(nèi)。
還可以使用object-fit
屬性來(lái)指定圖片在容器中的填充方式。
img { width: 100%; height: 100%; object-fit: contain; }
這將使圖片在容器內(nèi)按照比例縮放,同時(shí)保持圖片的原始縱橫比,如果圖片的原始尺寸大于容器的大小,那么圖片將按照比例縮小到容器大小之內(nèi)。