在網頁設計中，圖片的大小往往是一個重要問題。過大或過小的圖片都會對頁面造成不良影響，使得頁面布局不美觀。為了達到最佳的視覺效果，我們需要使用CSS對圖片進行等比例大小的設置。 在CSS中，使用height和width屬性來設置圖片的大小。然而，僅使用height和width屬性設置大小可能會出現拉伸或壓縮的情況，導致圖片的比例失調。為了保持圖片的比例，我們可以使用如下代碼： ``` img { max-width: 100%; height: auto; } ``` 這段代碼可以保證圖片的寬度不超過其容器的寬度，也就是說圖片會隨著容器的大小而自適應調整。而使用自適應高度屬性 height:auto，則可以保證圖片的高度與寬度比例保持不變，從而保證圖片在不同設備上都可以呈現出比較平衡的效果。 此外，如果需要設置一張背景圖片等比例大小，代碼可以如下： ``` div { background-image: url('example.jpg'); background-size: cover; background-repeat: no-repeat; } ``` 在這里，使用background-size: cover屬性可以保證背景圖片覆蓋整個容器，而不出現比例失調的情況。而使用background-repeat: no-repeat屬性可以保證背景圖片不出現平鋪的情況，從而保證用戶的視覺體驗。 總之，等比例大小是網頁設計中不可或缺的一個要素。只有正確設置圖片的大小，才能確保網頁的布局和視覺效果達到最佳狀態。如果您還沒有掌握這一重要技巧，趕緊來學習吧！