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

使用CSS3的object-fit屬性

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

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

使用CSS的background-size:cover屬性

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

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