CSS3是一種常用的網(wǎng)頁樣式設(shè)計語言，其中包含了許多圖片適應(yīng)方式，下面就來具體介紹一下它們。

/* 圖片適應(yīng)方式 */
.img1 {
width: 100%; /* 圖片寬度占滿容器 */
height: auto; /* 圖片高度自適應(yīng) */
}
.img2 {
height: 100%; /* 圖片高度占滿容器 */
width: auto; /* 圖片寬度自適應(yīng) */
}
.img3 {
object-fit: cover; /* 圖片等比例縮放，不變形 */
width: 100%; /* 圖片寬度占滿容器 */
height: 100%; /* 圖片高度占滿容器 */
}
.img4 {
object-fit: contain; /* 圖片等比例縮放，不超過容器 */
width: 100%; /* 圖片寬度占滿容器 */
height: 100%; /* 圖片高度占滿容器 */
}

通過這些圖片適應(yīng)方式，我們可以讓圖片在不同的容器下，都能夠完美的展現(xiàn)出來。

比如當(dāng)我們的圖片寬比容器窄時，我們可以使用img2方式讓圖片高度占滿整個容器，這樣就充分利用了容器的空間并讓圖片更加美觀。當(dāng)然，如果圖片寬度大于容器，那么我們也可以使用img1方式來讓圖片寬度占滿整個容器。

除此之外，還有img3和img4兩種方式，這兩種方式都是等比例縮放圖片，并且在容器范圍內(nèi)展示。不同的是，img3是讓圖片充滿整個容器，而img4是讓圖片在容器內(nèi)正常展示，不超過容器大小。

總之，在網(wǎng)頁設(shè)計中，圖片是非常重要的一部分，合適的圖片適應(yīng)方式可以讓圖片更好的顯示，也可以讓頁面更美觀。