如何实现背景图片居中且在响应式场景下保持原尺寸？

Been there, done that! 我完全懂你要的效果——背景图保持原始尺寸，不管浏览器窗口怎么缩放都死死居中，窗口变小时左右部分超出屏幕被隐藏，只留中间可见，还要解决垂直方向那点恼人的轻微裁剪问题对吧？我给你两套经过验证的CSS方案，分场景选择：

方案一：使用CSS背景图实现 #

先重置浏览器默认样式，解决默认margin导致的垂直裁剪，再通过精准属性实现需求：

/* 重置默认样式，解决垂直轻微裁剪 */
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden; /* 核心：隐藏超出视口的图片部分 */
}

/* 承载背景图的容器，占满整个视口 */
.background-wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url('你的图片路径');
  background-size: auto; /* 强制保持图片原始尺寸，不拉伸不缩放 */
  background-position: center center; /* 让图片在容器中完全居中 */
  background-repeat: no-repeat;
}

关键属性解析： #

• overflow: hidden：这是实现“超出部分隐藏”的核心，窗口缩小时，图片左右超出视口的区域会被自动隐藏，只保留中间可见部分
• background-size: auto：和cover/contain不同，这个属性会严格保留图片的原始宽高比和尺寸，不会为了适配容器而拉伸或压缩
• margin: 0：清除body的默认外边距，直接解决你遇到的垂直方向轻微裁剪问题

方案二：使用img标签实现（更灵活可控） #

如果你是用<img>标签展示图片而非CSS背景图，这套代码更合适：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 隐藏超出部分 */
}

.center-fixed-image {
  width: 1920px; /* 替换成你的图片原始宽度 */
  height: 1080px; /* 替换成你的图片原始高度 */
  object-fit: none; /* 强制保持图片原始尺寸，不做任何缩放 */
  object-position: center; /* 让图片在自身容器中居中 */
}

为什么这套方案靠谱？ #

• display: flex + justify-content: center + align-items: center：实现图片在视口中的绝对居中，彻底避免垂直方向的偏移裁剪
• object-fit: none：强制图片保持原始尺寸，不会因为容器大小变化而拉伸变形
• overflow: hidden：同样负责隐藏窗口缩小后超出的图片部分

选一套适合你场景的代码测试，应该就能完美实现你想要的效果了！

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