CSS中的圖像大小調整是網頁設計中十分重要的一項技能。它可以有效地改善頁面的視覺效果并減少頁面加載時間,同時可以讓頁面更加易于閱讀和瀏覽。
/* 方法一:使用width和height屬性調整圖像大小 */ img { width: 100px; /* 設置圖像寬度為100像素 */ height: auto; /* 讓高度自適應 */ } /* 方法二:使用max-width屬性限制圖像最大寬度 */ img { max-width: 100%; /* 圖像最大寬度為其父元素寬度的100% */ height: auto; /* 高度自適應 */ } /* 方法三:使用object-fit屬性適應圖像尺寸 */ img { width: 100px; /* 給定圖像一個固定的寬度 */ height: 100px; /* 給定圖像一個固定的高度 */ object-fit: cover; /* 圖像適應尺寸,以填滿 container */ }
以上三種方法都非常簡單易用,但每一種方法適合的情況略有不同。在實際應用中應根據頁面設計需求和圖像特點選擇相應方法。