CSS是一種用于樣式化網頁的語言。它可以幫助我們控制文本的大小、顏色、字體等等,還可以對圖片進行特別設計。對于一個網站的圖片,我們經常需要讓它們按照特定的大小顯示。接下來讓我們來學習如何用CSS讓圖片固定大小。
img { width: 300px; height: 200px; }
上面的代碼可以讓我們的圖片固定在300像素寬,200像素高。我們可以將代碼放置在網頁的header標簽中,或者將其放在單獨的CSS文件中。這樣,我們就可以讓網頁中所有的圖片都按照相同的尺寸顯示了。
如果我們想讓圖片按比例縮放,我們可以設置圖片的最大寬度或最大高度。如果圖片的實際大小超過了這個最大值,它將被自動縮小。下面的代碼演示了如何使用最大寬度。
img { max-width: 100%; height: auto; }
這個代碼片段表示,將圖片的最大寬度設為100%,當然這樣也可以將圖片的最大高度設為100%。如果圖片高度小于寬度,圖片的高度將自動調整以使其按照原始比例縮放。
備注:我們可以使用CSS中的像素(px)、百分比(%)、視窗寬度(vw)、視窗高度(vh)等單位來定義我們的圖片大小。除此之外,我們還可以使用JavaScript來實現更高級的圖片控制和動畫效果。