在網(wǎng)頁制作過程中，尤其是響應(yīng)式網(wǎng)站制作，新手小白寫自適應(yīng)banner代碼，測(cè)試會(huì)遇到圖片留空白/黑色邊緣、變形等問題，例如banner通常需要考慮自適應(yīng)整屏高度或者某個(gè)高度比，以及處理移動(dòng)端適配問題，一套完整支持高分辨率屏幕以及移動(dòng)端完美顯示的解決方案尤為重要。以下是北京網(wǎng)站建設(shè)行業(yè)對(duì)banner自適應(yīng)處理的一些技巧和建議：

使用CSS3的object-fit屬性

object-fit是CSS3的屬性，能夠控制圖片或視頻與容器的大小關(guān)系。在視頻banner上，我們可以針對(duì)容器設(shè)置該屬性，如下所示：

.banner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

使用CSS的background-size:cover屬性

background-size:cover是CSS的屬性，能夠控制圖片在容器顯示背景大小關(guān)系。在標(biāo)簽上，我們可以針對(duì)容器設(shè)置該背景圖片以及屬性，如下所示：

<p style="background:url(images/xxx.png) no-repeat center center; background-size:cover;"></p>