网站图片引发页面宽度异常求助：视频上方图片布局问题

我正在制作一个网站，将一张图片居中放置在视频上方，但该图片导致网站宽度出现异常。

页面状态对比 #

有图片时 #

无图片时 #

当前使用代码 #

CSS代码 #

#contain {
  position: relative;
}

video {
  height: 100vh;
  width: 100%;
  object-fit: fill;
  z-index: -1;
}

#img {
  height: 100vh;
  width: 100vw;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
}

HTML代码 #

<div id="contain">
  <div id="img">
    <a style="color:white; font-family:verdana;" title="Home"><img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5"></a>
  </div>
  <div id="vid"><video id="background-video" autoplay loop muted>
<source src="vid.mp4" type="video/mp4">
</video></div>
</div>

恳请帮忙排查问题原因并提供修复方案，谢谢。

问题原因分析 #

1. 图片固定宽度未做自适应：图片标签设置了固定的width="912.5"属性，当浏览器视口宽度小于这个值时，图片不会自动收缩，会超出容器范围，触发横向滚动条，导致页面宽度异常。
2. 容器使用100vw宽度引发冲突：#img容器设置了width:100vw，而浏览器默认的body元素带有margin，100vw是视口的完整宽度，加上body的margin会让容器超出页面范围，进一步加剧横向滚动问题。

修复方案 #

步骤1：调整图片容器样式 #

修改#img的CSS，去掉width:100vw，改用left:0; right:0让绝对定位容器占满父元素宽度，同时添加overflow:hidden防止内容溢出：

#img {
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

步骤2：让图片自适应容器宽度 #

给图片添加CSS规则，限制最大宽度并保持宽高比，同时覆盖HTML里的固定宽高：

#img img {
  max-width: 90%; /* 可根据需求调整，比如设为100%占满容器 */
  height: auto;
  width: auto;
}

或者直接删除HTML图片标签里的width和height属性，仅用CSS控制尺寸。

可选优化：视频显示效果 #

原视频使用object-fit:fill会导致画面拉伸变形，建议改为object-fit:cover，保持视频比例同时铺满容器：

video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

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