移动端横幅适配求助：如何让图片与视频横幅在移动端完整显示

阿华AIGC实验室

2026-4-8

Hey there! Let's tackle this banner responsiveness issue you're having—totally get how frustrating it is when desktop-perfect elements break on mobile. First off, a quick critical note: your HTML has two <div id="banner"> elements, but IDs must be unique in HTML. This will cause bugs with your CSS and any future JavaScript, so swap those out for <div class="banner"> instead.

Now, let's go through your options step by step to get those banners displaying fully on mobile:

1. 修复当前图片横幅（快速CSS调整）

你当前代码的核心问题是object-fit: cover——这个属性会裁剪图片来填满容器，这就是移动端只显示中间部分的原因。要完整显示图片，我们会结合媒体查询调整这个属性和容器尺寸。

首先，更新基础CSS为类选择器（代替ID）：

.banner img {
  filter: brightness(75%);
  /* 全屏幕通用基础样式 */
  width: 100%;
  height: auto;
}

/* 桌面端样式（你之前设置的min-width:800px） */
@media (min-width: 800px) {
  .banner img {
    width: auto;
    height: 100vh;
    object-fit: cover; /* 桌面端保留这个属性来填满视口高度 */
  }
}

/* 移动端样式（max-width:799px） */
@media (max-width: 799px) {
  .banner img {
    object-fit: contain; /* 保留图片比例，完整显示内容 */
    /* 也可以用`object-fit: scale-down`，自动在contain和原图尺寸间选最优适配 */
  }
}

如果你仍希望移动端横幅填满宽度且不裁剪，保留width: 100%; height: auto;即可——这会让图片按比例自适应屏幕宽度。

2. 切换为背景图片方案（更灵活控制内容布局）

用背景图片是横幅的常用方案，能更清晰分离视觉元素和文字内容。设置方法如下：

优化后的HTML：

<div class="banner banner-artemis">
  <h1>Artemis II</h1>
  <p>Astronauts will be in proximity of the moon for the first time since 1972. Artemis II is planned to launch no later than April 2026.</p>
</div>

对应CSS（含媒体查询）：

.banner {
  width: 100%;
  min-height: 100vh; /* 桌面端填满视口高度 */
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(75%);
  /* 让文字居中显示 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white; /* 调整文字颜色，适配暗化后的背景 */
  padding: 2rem 1rem; /* 防止移动端文字贴到屏幕边缘 */
}

.banner-artemis {
  background-image: url("/Assets/Banners/artemis_IIBanner.jpg");
}

/* 桌面端专属样式 */
@media (min-width: 800px) {
  .banner {
    background-size: cover; /* 填满容器，必要时裁剪（适合桌面端） */
  }
}

/* 移动端专属样式 */
@media (max-width: 799px) {
  .banner {
    min-height: auto; /* 由内容决定高度 */
    background-size: contain; /* 完整显示图片，不裁剪 */
    /* 或者用`background-size: 100% auto`让图片填满屏幕宽度，高度自动适配 */
  }
}

3. 视频横幅解决方案（含JS切换不同比例视频）

视频横幅的CSS修复逻辑和图片类似。如果你想针对不同屏幕用不同比例的视频（桌面16:9，移动端9:16），这里有一个适合新手的简单JS实现：

可切换视频的HTML：

<div class="banner video-banner">
  <video id="hero-video" playsinline muted autoplay loop>
    <source src="/Assets/Banners/desktop-video.mp4" type="video/mp4" class="video-source desktop">
    <source src="/Assets/Banners/mobile-video.mp4" type="video/mp4" class="video-source mobile">
  </video>
  <h1>Artemis II</h1>
  <p>Astronauts will be in proximity of the moon for the first time since 1972. Artemis II is planned to launch no later than April 2026.</p>
</div>

视频横幅CSS：

.video-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.video-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(75%);
}

@media (min-width: 800px) {
  .video-banner video {
    object-fit: cover; /* 桌面端裁剪视频填满视口 */
  }
}

@media (max-width: 799px) {
  .video-banner video {
    object-fit: contain; /* 移动端完整显示视频 */
    position: static; /* 移除绝对定位，让高度自适应 */
    height: auto;
  }
}

切换视频的简单JS：

// 根据屏幕尺寸切换视频源的函数
function updateVideoSource() {
  const video = document.getElementById('hero-video');
  const desktopSource = document.querySelector('.video-source.desktop');
  const mobileSource = document.querySelector('.video-source.mobile');

  if (window.innerWidth <= 799) {
    // 切换到移动端视频
    video.src = mobileSource.src;
  } else {
    // 切换到桌面端视频
    video.src = desktopSource.src;
  }
  // 重新加载视频应用新源
  video.load();
}

// 页面加载时执行一次
window.addEventListener('load', updateVideoSource);

// 窗口尺寸变化时重新执行
window.addEventListener('resize', updateVideoSource);

注意：playsinline和muted是大部分移动端浏览器允许自动播放的必要条件。