CSS 是網頁設計中一個處理布局和樣式的非常重要的技術,它可以改變 HTML 元素的樣式,比如文本、鏈接和圖片的大小。
在 CSS 中,我們可以使用width
屬性來控制圖片的寬度。這個屬性可以接收像素和百分比兩種單位。如果我們想讓圖片自適應容器寬度,可以設置為100%
。
img { width: 100%; }
上述代碼會讓圖片的寬度和它所在的容器一樣寬。這種方法非常適用于響應式設計,因為圖片可以根據不同的屏幕尺寸自適應調整大小。
當然,如果我們想限制圖片的寬度,也可以將width
屬性設置為固定的像素值:
img { width: 500px; }
這樣設置會讓圖片的寬度都是 500 像素。如果圖片原始大小小于 500 像素,它就不會被拉伸,如果原始大小大于 500 像素,它就會被縮小,以適應這個固定寬度。
上述兩種 CSS 控制圖片寬度的方法非常簡單易懂,我們可以在實際項目中靈活運用,以獲得最佳的視覺效果。