CSS3是一種用來美化網(wǎng)頁的語言，它有許多功能可以讓我們的網(wǎng)頁更加精美和華麗。其中，圖片寬高比是CSS3中的一個(gè)很重要的屬性。

在網(wǎng)頁制作中，我們經(jīng)常需要使用圖片作為裝飾或是展示。但是，如果我們不設(shè)置圖片的寬高比，圖片可能會被拉伸或壓縮，導(dǎo)致圖片失真或變形。因此，正確設(shè)置圖片的寬高比非常重要。

img {
width: 100%; /* 讓圖片寬度占滿父元素寬度 */
height: auto; /* 根據(jù)圖片比例自適應(yīng)高度 */
object-fit: cover; /* 填充父元素 */
}

上述CSS代碼可以讓圖片在父元素中完整顯示，而不會出現(xiàn)拉伸或壓縮的情況。其中，width屬性設(shè)置為100%以保證圖片的寬度占滿父元素的寬度。而height屬性設(shè)置為auto，則可以讓圖片高度根據(jù)圖片的比例自適應(yīng)變化。最后，object-fit屬性可以將圖片填充父元素，讓整個(gè)圖片都能完整顯示。

在使用CSS3時(shí)，我們還可以使用其他的屬性來設(shè)置圖片寬高比。例如，padding-top屬性可以設(shè)置圖片的上邊距，從而達(dá)到對寬高比的控制。

div {
position: relative; /* 父元素設(shè)置相對位置 */
width: 100%; /* 父元素寬度占滿整個(gè)屏幕 */
}
img {
position: absolute; /* 圖片相對定位，依據(jù)父元素 */
top: 0; left: 0; /* 圖片位置在父元素左上角 */
width: 100%; /* 圖片寬度占滿父元素寬度 */
height: auto; /* 根據(jù)圖片比例自適應(yīng)高度 */
}
div:before {
content: ""; /* 空偽元素 */
display: block; /* 塊級元素 */
padding-top: 56.25%; /* 16:9寬高比 */
}

上述CSS代碼可以讓圖片寬高比為16:9。其中，padding-top屬性設(shè)置為56.25%是因?yàn)?6:9的圖片寬度是高度的56.25%。我們可以修改padding-top屬性的值來實(shí)現(xiàn)不同比例的圖片顯示。

總的來說，設(shè)置圖片寬高比是CSS3中非常重要的一項(xiàng)技能。只有正確地設(shè)置了圖片寬高比，才能讓我們的網(wǎng)頁呈現(xiàn)出完美的效果。