CSS等比例縮放通常是在網頁開發過程中常常需要用到的技巧。下面我們將討論如何使用CSS使圖像按比例縮放，并保留其原始寬高比例。以下演示的代碼可以用于任何圖像和容器大小，而不必考慮測試環境中的具體設置。

.container {
width: 100%;
height: 0;
padding-bottom: 50%;  /* 以容器寬度的50%量來設置容器高度 */
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;  /* 或 cover 根據需要自由選擇 */
width: 100%;
height: 100%;
}

首先，我們在按比例縮放的容器上設置一個高度百分比。在此示例中設置了50％，但可以為其他任何百分比值。這使得容器的高度根據其大小自動調整。接下來，我們將圖像設置為容器的絕對定位元素，并設置其寬度和高度均為100％。這意味著圖像將始終填滿整個容器的寬度和高度。

最后，我們使用“object-fit”屬性來控制將圖像調整為容器中的大小。object-fit屬性有兩個選項：“contain”和“cover”。如果選擇contain，圖像將始終縮放到容器的大小，同時保留其寬高比例。如果選擇cover，則圖像將按比例縮放，同時保持至少與容器大小一樣大。這取決于您的項目需要哪種方法。