使用CSS 控制圖片大小 在網站設計中，很多時候我們需要用到圖片。但是對圖片的大小、質量及排版等問題，設計師需要進行仔細的控制。下面我們就來探討一下如何使用CSS來控制圖片的大小。 1. 使用background-size屬性控制背景圖片大小 background-size屬性可以控制背景圖片的大小。該屬性有兩個值。一個是長度，另一個是percentage。可以是auto或contain或cover。其中auto表示保持原有尺寸，cover表示覆蓋整個父元素范圍，contain表示圖片完整顯示。 pre{ background: url("圖片鏈接") no-repeat center; background-size: contain; // 也可以使用具體的像素或百分比 } 2.使用max-width和max-height屬性控制圖片大小 如果想要保持圖片的比例，同時縮小了圖片大小。使用max-width和max-height屬性是個不錯的選擇。讓圖片高度或者寬度自適應父元素。 pre{ img{ max-width: 100%; height: auto; } } 3.使用width和height屬性控制圖片大小 可以使用width和height屬性直接控制圖片大小。注意，當圖片的寬高與原有圖片不同時，會導致圖片變形，影響視覺效果。 pre{ img{ width: 200px; height: 200px; } } 總結 以上就是幾種使用CSS控制圖片大小的方法。在實際運用中，可以根據具體的情況進行選擇。同時，還需要注意圖片在加載時帶來的影響，盡量減小圖片的文件大小，縮短圖片的加載時間。