如何为CSS背景图动画设置100%宽度以适配屏幕

问题描述 #

我用纯CSS制作图片切换器，通过动画实现了图片切换效果，但图片尺寸适配有问题：给承载动画的div设置width: 100%; height: auto;后，背景图无法像HTML img标签那样适配屏幕，还会重复显示填补空白。想知道如何让动画中的图片宽度设为100%并正确适配。

解决方案 #

要实现类似img标签的适配效果，只需给.animation类添加几个背景属性，同时调整容器高度的设置：

1. 核心属性添加

   • background-size: 100% auto;：让背景图宽度占满容器，高度按原图比例自动缩放，和img标签默认行为一致
   • background-repeat: no-repeat;：禁止背景图重复填充容器空白
   • background-position: center;：确保图片在容器中居中显示，避免缩放后位置偏移

2. 全屏适配调整
   如果需要div全屏显示，把固定高度height: 300px改为height: 100vh（100vh等于当前浏览器视口高度），同时清除html和body的默认边距，防止出现滚动条。

修改后的完整代码 #

CSS代码

/* 清除默认边距，避免全屏时出现留白或滚动条 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.animation {
  animation: imgswaper 10s infinite alternate;
  width: 100%;
  height: 100vh; /* 全屏高度 */
  background-size: 100% auto; /* 宽度占满，高度自适应 */
  background-repeat: no-repeat; /* 禁止图片重复 */
  background-position: center; /* 图片居中 */
}

@keyframes imgswaper {
  0%, 1% {
    background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
  }
  50%, 51% {
    background-image: url(https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202207110316);
  }
  100% {
    background-image: url(https://www.collinsdictionary.com/images/full/apple_158989157.jpg);
  }
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>
<body>
  <div class="animation"></div>
</body>
</html>

说明 #

• background-size: 100% auto 是实现图片适配的关键，它保证图片宽度始终填满容器，高度随比例自动调整，完全复刻img标签的适配逻辑
• 清除html和body的默认样式是为了让容器真正全屏显示，避免不必要的留白和滚动条

内容的提问来源于stack exchange，提问作者Gabriel Vallejo