CSS可以幫助我們展示圖片時(shí)保持圖片的大小比例，讓我們的頁(yè)面看起來(lái)更加美觀。

/* 按比例展示圖片 */
.img-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.img-container img {
display: block;
max-width: 100%;
height: auto;
}

上面的代碼展示了如何用CSS來(lái)實(shí)現(xiàn)按比例展示圖片。我們首先給圖片的容器設(shè)置固定的寬度，然后將該容器居中顯示。接下來(lái)，我們將圖片設(shè)置為塊級(jí)元素，然后將其最大寬度設(shè)為100%以確保圖片可以自適應(yīng)其父容器的寬度。最后，我們將圖片的高度設(shè)為自適應(yīng)，并且不指定具體的高度值。

通過(guò)這樣的設(shè)置，當(dāng)圖片的寬度超過(guò)容器的寬度時(shí)，圖片會(huì)自動(dòng)縮放并保持比例。這樣我們就可以在不失真的情況下展示更大的圖片。總的來(lái)說(shuō)，按比例展示圖片是一個(gè)很簡(jiǎn)單的CSS技巧，但它可以顯著提升我們的頁(yè)面質(zhì)量，使我們的網(wǎng)站更加美觀和用戶友好。