當我們在網(wǎng)頁中插入圖片時，有時候需要對圖片的比例進行設(shè)定。CSS提供了多種方法讓我們能夠輕松設(shè)置圖片的寬高比例

/* 設(shè)定圖片寬高比例 */
.my-img {
width: 400px;
height: auto;
aspect-ratio: 16/9;
}
/* 按比例縮放圖片 */
.my-img {
width: 50%;
height: auto;
object-fit: cover;
aspect-ratio: 16/9;
}
/* 給圖片添加白邊，讓比例變?yōu)?4:3 */
.my-img {
width: 300px;
height: 225px;
padding: 20px;
box-sizing: border-box;
aspect-ratio: 4/3;
}

在上述代碼中，我們使用了aspect-ratio屬性來指定圖片的比例。通過這個屬性，我們可以設(shè)置寬高比例為任何值。

同時，我們還可以使用object-fit: cover讓圖片按比例縮放，不會變形，始終充滿整個元素。如果不想讓圖片鋪滿整個元素，可以使用padding設(shè)置白邊，以達到類似于等比縮放的效果。

總之，使用CSS設(shè)定圖片的比例很簡單，根據(jù)自己的需求設(shè)定不同的寬高比例，可以讓網(wǎng)頁看起來更美觀更整潔。