设置background-size:cover后背景图片仍然过大问题咨询

你当前使用的background-size: cover属性逻辑为：按原图比例缩放直至完全覆盖容器区域，超出容器的部分会被直接裁切。如果html元素未明确设置高度，或是图片比例和容器比例差异较大，就会出现图片看起来被放大、显示不全的问题。

修复方案 #

• 方案1：补全基础样式，保证容器尺寸和视口匹配
  大多数同类问题都是因为html、body元素的高度默认由页面内容撑开，若页面内容高度不足，会导致背景图按过小的高度计算缩放比例，最终宽度超出视口。同时你当前代码中重复写了两次-moz-background-size: cover，属于冗余代码可直接删除，目前主流浏览器都支持无前缀的background-size属性，无需额外添加浏览器前缀。修改后参考代码如下：

  /* 先全局清除默认边距，避免默认边距撑开容器导致背景错位 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 明确设置html、body高度为100%，和视口高度一致 */
  html, body {
    height: 100%;
  }
  html {
    background-image: url("https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  

• 方案2：更换背景尺寸属性避免裁切
  如果你不需要背景完全覆盖容器，希望完整显示整张图片，将background-size: cover替换为background-size: contain即可。该属性会按比例缩放图片直至完整放入容器内，不会出现裁切导致的“显示过大”问题，仅可能在容器边缘出现空白区域。
• 方案3：自定义背景图固定尺寸
  你也可以直接指定背景图的具体尺寸，比如设置为和视口完全匹配：background-size: 100vw 100vh，注意该设置会拉伸图片适配容器，若图片比例和视口比例不一致会出现画面变形。
• 方案4：固定背景滚动属性
  如果页面滚动时背景图跟随移动导致视觉上尺寸异常，可以添加background-attachment: fixed属性，让背景图固定在视口位置不随页面滚动变化。

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