CSS @media标签背景图缩放异常问题求助

你的问题核心是没控制好背景图的显示规则，默认的background-size（比如cover）会强制图片覆盖容器，导致内容被裁剪。试试下面的调整：

1. 给头部容器设置基础样式 #

先确保头部元素的基础CSS里定义好背景图的显示方式，媒体查询只替换图片路径：

/* 头部基础样式 */
.header {
  width: 100%;
  /* 设置和背景图比例匹配的高度，比如你的大图是1200x200，就设height:200px */
  height: 200px;
  background-repeat: no-repeat;
  /* 固定左侧对齐，保证Bible4All文字始终在左边 */
  background-position: left center;
  /* 关键：让图片完整显示，不裁剪 */
  background-size: contain;
}

2. 媒体查询仅替换背景图 #

不需要在每个媒体查询里重复写其他背景属性，只改background-image即可：

/* 大屏设备 */
@media only screen and (min-width: 1200px) {
  .header {
    background-image: url('large-bible-bg.jpg');
  }
}

/* 平板设备 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .header {
    background-image: url('medium-bible-bg.jpg');
  }
}

/* 手机设备 */
@media only screen and (max-width: 767px) {
  .header {
    background-image: url('small-bible-bg.jpg');
  }
}

3. 额外检查点 #

• 确保每个断点的背景图和头部容器的高宽比例一致，比如头部高200px，那所有背景图的高度都设为200px，宽度按比例缩放，这样contain就能刚好填满容器，不会留空白也不会裁剪。
• 检查头部容器有没有设置overflow: hidden或者额外的padding/margin，这些可能导致容器实际宽度小于预期，间接引发裁剪。

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