如何使CSS背景图片全屏拉伸且保持良好画质？

当前你的背景图片因使用background-size: contain，会保持图片比例完整显示，因此左右出现白边。要实现全屏拉伸且保留画质，按以下方式修改CSS：

原代码 #

.bg {
  background-image: url('/app/assets/bg.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  height: calc(100vh - 196px);
  background-position: top;
}

修改后的代码 #

.bg {
  background-image: url('/app/assets/bg.jpeg');
  background-size: cover; /* 核心修改：替换contain为cover */
  background-repeat: no-repeat;
  background-position: center; /* 可选：让图片居中显示，也可保留top */
  width: 100%; /* 确保容器宽度占满父元素 */
  height: calc(100vh - 196px);
}

关键修改说明 #

• background-size: cover：让图片按比例缩放至完全覆盖容器，不会留白边，超出容器的部分会被裁剪，能最大化保证画质和全屏填充效果。
• width: 100%：确保.bg容器本身占满父元素宽度，避免因容器宽度不足导致的留白。
• 若希望图片顶部对齐，可保留background-position: top，根据实际需求调整即可。

未全屏效果参考 #

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