网站顶部div背景图片如何保持原尺寸并水平居中？

很简单，只需要调整几个CSS背景相关的属性就能实现你的需求，直接给你具体的实现方法：

核心CSS属性说明 #

针对你的顶部div，你需要设置以下几个关键属性：

• background-size: auto：强制图片保留原始的宽高和尺寸，不会被拉伸或缩放来填满div
• background-repeat: no-repeat：防止图片因为div尺寸大于图片而重复平铺
• background-position: center：控制图片水平居中，你还可以指定垂直位置（比如center top表示水平居中、垂直靠顶部，center center则是水平垂直都居中）

完整代码示例 #

假设你的div类名为top-header，完整的CSS代码可以写成这样：

.top-header {
  /* 这里是你原来的div尺寸设置，比如宽度100%，高度根据实际需求调整 */
  width: 100%;
  height: 400px;
  /* 背景图相关设置 */
  background-image: url('你的图片路径');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center top; /* 水平居中，垂直靠顶部，可根据需求修改 */
}

或者你也可以用background简写属性，把所有设置合并成一行：

.top-header {
  width: 100%;
  height: 400px;
  background: url('你的图片路径') no-repeat center top / auto;
}

补充说明 #

如果你的div高度比图片高，垂直方向的位置可以灵活调整：

• 想让图片垂直居中就用center center
• 想让图片靠底部就用center bottom
• 也可以用百分比或具体像素值，比如center 20px表示水平居中，垂直距离顶部20px

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