在網頁設計過程中，圖片的表現力是非常關鍵的。然而，在不同的設備和分辨率下，我們可能需要讓同一張圖片按比例變化以適應不同的屏幕大小。CSS提供了幾種方法來解決這個問題。 首先，我們可以使用img元素的max-width屬性。這個屬性可以使圖片的寬度最大為一個指定的值，同時保持原始比例。例如：

img {
max-width: 100%;
}

這個樣式將使所有的圖片在其父元素中按比例自適應。 但如果我們想讓圖片在高度和寬度比例上更加自由，我們可以使用容器元素和偽元素。 假設我們有一個容器元素，它的高度是固定的，寬度根據不同的屏幕大小而變化。我們可以使用CSS的padding-bottom屬性來保持圖片高度的比例。例如：

.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

這個樣式將使圖片的高度保持原始比例，即寬度為高度的56.25%。 最后，我們可以使用background-image和background-size屬性，將圖片作為元素的背景來顯示。這樣可以讓圖片自適應，并且可以調整圖片的位置。例如：

.element {
background-image: url("image.jpg");
background-size: cover;
background-position: center center;
}

這個樣式將會使圖片縮放并填充容器，在保持原始比例的同時調整位置。 總之，CSS提供了很多方法來使圖片按比例自適應，只需要根據不同的需求選擇適合的方法即可。