如何将随机图片生成函数设置为适配视口的页面背景图

核心改造逻辑 #

无需推翻你现有定时切换、淡入淡出的交互链路，只需要将原有的随机插入<img>标签的逻辑，替换为给指定容器赋值background-image的操作，配合CSS视口适配规则，就能实现图片高度始终与浏览器视口一致的效果。 #

具体实现步骤 #

1. CSS层面调整，实现视口高度匹配 #

将原来针对#welcomeImage img写的适配样式，改为给#welcomeImage容器本身设置满视口规则：

• 用height: 100vh替代普通的百分比高度：vh单位直接绑定视口高度，不受父元素嵌套的高度限制，从根源上保证容器高度和浏览器视口完全一致
• 给容器补充背景图适配规则，避免图片变形、平铺错位：

#welcomeImage {
  width: 100%;
  height: 100vh; /* 高度完全匹配视口 */
  /* 背景图适配规则 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* 保留你原有自定义的淡出动画逻辑 */
  animation: fadeOut 1s forwards; 
  animation-delay: 3s;
}

注意：原来写在html, body上的background-size: cover可以删除，因为背景图现在挂载在#welcomeImage容器上，不再直接作用于body。

2. JS函数改造，替换随机图赋值逻辑 #

原函数的核心随机选图逻辑完全保留，只把原来“生成img标签字符串、用document.write写入页面”的部分，替换为直接给#welcomeImage的背景图属性赋值：

var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];

function setRandomBg(imgAr, path) {
  path = path || 'images/'; // 保留原有的默认图片路径配置
  var num = Math.floor( Math.random() * imgAr.length ); // 随机选图逻辑不变
  var imgPath = path + imgAr[num];
  // 直接将选中的图片设为目标容器的背景
  document.getElementById('welcomeImage').style.backgroundImage = `url('${imgPath}')`;
}

3. HTML结构精简 #

原#welcomeImage容器内不需要再嵌入script标签插入img元素，直接将函数调用放在页面加载逻辑里执行即可：

<div id="wrapper">
  <!-- 欢迎页背景容器，无内嵌子元素 -->
  <div id="welcomeImage"></div>

  <div id="introText" class="animated fadeIn">
    <p>div text</p>
  </div>

  <!-- 原有的定时隐藏、文本淡入逻辑全部保留 -->
  <script type="text/javascript">
    window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); 
    function showIt() {document.getElementById("introText").style.display = "block";}
    setTimeout("showIt()", 5000);
    // 页面加载完成后执行随机背景设置
    setRandomBg(random_images_array, 'images/');
  </script>
</div>

优化说明 #

• 移除原有的document.write写入逻辑：这种方式如果脚本加载时机滞后，会覆盖掉页面已渲染的全部内容，改为直接操作DOM属性后完全规避这个风险
• 原有淡入淡出动画效果不受影响：动画作用在#welcomeImage容器上，容器的透明度变化会直接带动背景图的过渡效果，和原img标签的视觉体验完全一致
• 适配动态视口变化：100vh单位会自动跟随浏览器窗口大小、移动端横竖屏切换实时更新高度，配合cover的背景图裁切规则，不需要额外写resize监听逻辑
• 原有无关样式可以清理：比如a img { border:none; }这类针对img标签的样式，在移除img元素后可以直接删掉，减少冗余代码

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