如何使用JS与CSS实现background-image非响应式固定尺寸显示

修正方案 #

你原来的代码存在三处不符合需求的设置：

1. background-size: cover会自动适配容器尺寸缩放背景图，窗口缩小后背景图也会跟着缩小
2. background-attachment: fixed会把背景图固定在视口位置，滚动页面时背景不会动，无法通过滚动查看完整背景
3. 容器宽高设置为100%会跟随视口大小变化，窗口缩小后容器本身也会被压缩，不会出现滚动条

最终可直接使用的代码

/* 先重置html和body的默认边距，同时保证页面最小尺寸匹配初始屏幕分辨率 */
html, body {
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
}

.bg {
  background-image: url("pic.png");
  background-repeat: no-repeat;
  /* 背景图固定为初始屏幕的100%尺寸，不会跟随窗口缩放 */
  background-size: 100vw 100vh;
  /* 背景跟随元素滚动，方便拖动滚动条查看完整内容 */
  background-attachment: scroll;
  /* 容器最小尺寸匹配初始屏幕分辨率，窗口缩小后不会被压缩，自动出现滚动条 */
  min-width: 100vw;
  min-height: 100vh;
}

核心逻辑说明

• 用vw/vh单位取浏览器初始加载时的视口宽高，这个值是固定的，不会因为后续手动缩小窗口发生变化
• 只给容器设置最小宽高，窗口比初始尺寸大的时候背景可以跟着延展，比初始尺寸小的时候容器保持原大小，自动触发滚动条
• 取消背景图的自适应缩放和固定定位，保证背景和容器保持同步，滚动时可以查看完整内容

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