CSS是前端開發中非常重要的一個技術。它可以控制網頁的布局、樣式、行為等等。而在網頁中，圖片的展示是不可或缺的。那么，如何通過CSS控制圖片寬高比呢？下面就來詳細講解。

/* 設置圖片寬高比為4:3 */
img {
width: 100%;
height: 0;
padding-bottom: 75%;
}

上面這段CSS代碼，通過設置 width 和 padding-bottom 來控制圖片的寬高比。首先，將圖片的寬度設為100%（即充滿整個容器），然后將高度設為0（這里雖然看起來有些奇怪，但是其實是有效的）。

接著，通過padding-bottom屬性來控制圖片的高度。padding-bottom的值是基于容器寬度的百分比。由于寬度已經設為100%，所以在這里，我們可以將padding-bottom設為圖片寬度的75%，從而控制圖片高度的比例（4:3）。

/* 設置圖片寬高比為16:9 */
img {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

如果要將圖片的寬高比設置為16:9，原理與上面相同。只不過這里需要將padding-bottom設為圖片寬度的56.25%。

總之，在網站開發中，通過CSS可以輕松控制圖片的寬高比。上面的代碼只是其中的一種方法，也可以根據實際情況進行調整和優化。