CSS是網(wǎng)頁設(shè)計的重要技術(shù)之一，而保持圖片的縱橫比在CSS中也是一個關(guān)鍵的問題。一般來說，我們可以通過設(shè)置元素的寬度和高度來控制圖片的大小，但同時又必須保持它的縱橫比不變。

有兩種常用的方法可以實現(xiàn)這個效果。第一種是使用百分比值來設(shè)置元素的寬度和高度。因為百分比值會根據(jù)當(dāng)前元素的父元素進行計算，所以當(dāng)元素的寬高比與圖片的寬高比相同時，就可以保持圖片的縱橫比。

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

第二種方法是使用CSS3提供的object-fit屬性來控制圖片的大小和位置。object-fit有四個取值：fill、contain、cover和none，分別對應(yīng)不同的圖片裁剪方式。

.img-container {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

以上就是兩種常用的保持圖片縱橫比的方法。使用這些方法可以方便地實現(xiàn)網(wǎng)頁中的圖片布局效果，并且在不同的屏幕尺寸下仍然能夠保持圖片的美觀。