CSS 中圖片等比居中縮放是一個很常見的需求。它可以讓我們在不改變圖片原始比例的情況下，將圖片居中顯示，并根據(jù)父元素的大小進行縮放。下面我們來看看如何實現(xiàn)這一效果。

<div class="container">
<img src="path/to/image.jpg" alt="My Image">
</div>
.container {
position: relative;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

首先，在 HTML 中我們可以創(chuàng)建一個包含圖片的容器，再在 CSS 中設置容器的屬性。這里設置了 position: relative，以便讓圖片相對于容器進行居中定位。

接著，我們對圖片設置一系列樣式。通過設置 position: absolute，讓圖片從容器的左上角開始，以左邊和上邊的距離來進行定位。然后通過 top: 50% 和 left: 50%，使圖片處于容器中央。但是此時圖片的左上角會處于容器的中心位置，我們需要使用 transform: translate(-50%, -50%) 來讓圖片的中心點與容器的中心點重合。

最后，我們再給圖片設置 max-width: 100% 和 max-height: 100%，讓其在不超出容器大小的前提下進行縮放。這樣就完成了圖片等比居中縮放的效果。