在CSS中調(diào)整圖片大小是一個常見的需求,您可以通過使用CSS的width
和height
屬性來實現(xiàn),這兩個屬性用于指定圖片元素的寬度和高度。
如果您想要將一張圖片的寬度調(diào)整為300像素,高度調(diào)整為200像素,您可以這樣寫:
img { width: 300px; height: 200px; }
這段CSS代碼會將所有<img>
元素的寬度設(shè)置為300像素,高度設(shè)置為200像素,如果您想要針對特定的圖片進行調(diào)整,您可以給圖片添加一個特定的類名或者ID,然后針對這個類名或者ID進行調(diào)整。
如果您想要調(diào)整ID為myImage
的圖片大小,您可以這樣寫:
#myImage { width: 500px; height: 600px; }
這段CSS代碼會將ID為myImage
的圖片寬度設(shè)置為500像素,高度設(shè)置為600像素。
如果圖片原本的寬高比與您設(shè)置的寬高比不一致,圖片可能會出現(xiàn)拉伸或者壓縮的情況,如果您想要保持圖片的寬高比不變,您可以只設(shè)置寬度或者高度其中一個屬性,另一個屬性可以讓瀏覽器自動計算得出。
如果您想要保持圖片的寬高比不變,只設(shè)置寬度為300像素,您可以這樣寫:
img { width: 300px; height: auto; }
這段CSS代碼會將所有<img>
元素的寬度設(shè)置為300像素,高度則會自動計算得出,從而保持圖片的寬高比不變。