如何正确设置背景图片？背景图片放大问题修复咨询

我尝试将一张图片设置为网页背景，但图片显示为放大版本。我的代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body, html { height: 100%; } 
.bg { 
    /* The image used */ 
    background-image: url("../../media/image1.jpeg"); 
    /* Full height */ 
    height: 100%; 
    /* Center and scale the image nicely */ 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
</style> 
</head> 
<body class="bg"> 
</body> 
</html>

请问该如何修复这个问题？

你遇到的问题核心是background-size: cover的特性导致的——这个属性会强制让图片完全覆盖整个容器区域，为了填满空间，图片会被等比例放大，直到容器的宽高都被彻底覆盖。如果图片的宽高比和视口（你的容器是整个页面）差异较大，就会出现局部被过度放大的情况。

下面给你几个实用的修复方案，你可以根据自己的需求选择：

• 替换为background-size: contain
  这个属性会让图片保持原有宽高比例，完整显示在容器内，同时尽可能占满空间，但不会超出容器边界。这样图片就不会被过度放大，不过如果图片和容器比例不匹配，容器的部分区域会出现空白背景。修改后的代码片段：

  .bg {
      /* 其他属性保持不变 */
      background-size: contain;
  }
  

• 指定具体尺寸值
  如果你希望图片按照特定规则缩放，可以直接设置宽度和高度，比如让图片宽度充满视口、高度自适应：

  .bg {
      /* 其他属性保持不变 */
      background-size: 100% auto;
  }
  

  也可以设置固定尺寸（比如800px 600px），但这种方式可能会破坏图片比例，需要根据场景谨慎使用。

• 结合background-attachment: fixed优化全屏体验
  如果你想要全屏背景的同时减少过度拉伸感，可以给背景添加固定属性，让图片随页面滚动保持固定位置，搭配cover使用会让视觉效果更自然：

  .bg {
      /* 其他属性保持不变 */
      background-attachment: fixed;
  }
  

• 使用background-size: auto
  让图片按照原始尺寸显示，不会被缩放，但如果图片尺寸小于容器，由于你设置了background-repeat: no-repeat，只会显示一次，容器会出现大量空白，适合图片尺寸刚好匹配视口的场景。

另外，从源头优化的话，你可以选择宽高比和视口更匹配的高分辨率图片，能从根本上减少缩放带来的显示问题。

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