CSS是網(wǎng)站設(shè)計(jì)中非常重要的一部分，通過CSS我們可以改變頁面的布局、字體、顏色等等，還可以添加圖片以及一些其他的效果。其中，CSS中的背景圖片也是非常常用的，而其中的contain屬性更是讓我們的網(wǎng)站布局更加靈活，讓我們來學(xué)習(xí)一下。

background-size: contain;

contain是一種背景圖片大小值，在CSS中用來描述如何調(diào)整背景圖片的大小以適應(yīng)容器。當(dāng)容器和圖片的比例不同時(shí)，contain效果非常好，它可以讓圖片完全適應(yīng)容器的寬度或者高度并居中。

而當(dāng)容器的寬高比例和圖片的寬高比例一致時(shí)，contain的作用就與cover一樣。在這種情況下，contain會(huì)調(diào)整圖片的大小以使其完全適應(yīng)容器，但是不一定填滿容器。因此，圖片可以完整地顯示，并且不會(huì)出現(xiàn)任何拉伸或壓縮的效果，同時(shí)也不會(huì)裁剪任何部分。

為了演示背景圖片contain的效果，我們假設(shè)有一個(gè)div容器，并且在其中設(shè)置了一個(gè)backgroud-image屬性來設(shè)置背景圖片。現(xiàn)在我們將contain作為背景圖片的大小尺寸，如下：

div {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: contain;
}

通過上面的代碼，我們就成功地將圖片放入到了網(wǎng)頁的容器當(dāng)中，并且讓圖片就在容器中居中顯示。通過設(shè)置這個(gè)尺寸，我們還可以保持圖片的原始寬高比例，讓其看起來更加美觀。

綜上所述，contain是CSS中非常實(shí)用的一種背景圖片大小尺寸，在設(shè)計(jì)網(wǎng)頁的時(shí)候經(jīng)常會(huì)用到。無論是在圖片與容器的寬高比例一致還是不一致的情況下，都能幫助我們讓頁面更加美觀、靈活。