CSS是一種用于修飾網頁的樣式表語言,它的功能不僅限于網頁美化,還可以控制網頁中的元素大小、位置等。本文將介紹如何使用CSS來控制圖片的大小。
/* CSS代碼 */ img { width: 200px; /* 設置圖片寬度為200像素 */ height: 150px; /* 設置圖片高度為150像素 */ }
上述代碼中的選擇器用于選取所有圖片元素,它的width和height屬性分別用于設置圖片的寬度與高度。按照上述代碼,所有圖片的寬度都被設置為200像素,高度被設置為150像素。
在實際應用中,我們可以根據需要靈活地調整圖片大小。例如,如果希望圖片寬度與容器寬度相同,可以將width屬性設置為100%:
/* CSS代碼 */ img { width: 100%; /* 設置圖片寬度為容器寬度 */ height: auto; /* 高度自適應 */ }
注意,這里的height屬性被設置為auto,表示高度自適應。這樣,在容器寬度改變的時候,圖片也會跟著自適應調整大小。
除了通過設置固定的像素值或百分比來控制圖片大小,還可以使用其他單位,例如em、rem等。這些單位會根據網頁字體大小的改變而自適應調整,因此更加靈活。
總之,使用CSS可以輕松地控制圖片大小,只需要簡單的幾行代碼就可以實現,讓你的網站更加美觀大方。