网站制作banner图片自动适应屏幕如何处理？

在网页制作过程中，尤其是响应式网站制作，新手小白写自适应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>