如何让背景图片适配屏幕且不拉伸，并实现页面加载时自动轮换？

嗨，我来帮你搞定这个背景图片的问题！下面结合你的需求，一步步解决「适配屏幕不拉伸」和「自动轮换」这两个核心问题：

一、先搞定「适配屏幕不拉伸」 #

你原来的代码直接给容器和图片设置100%宽高，很容易导致图片变形。我们可以通过CSS的object-fit属性让图片保持比例填充屏幕，同时裁剪多余部分，保证视觉效果：

修改后的CSS样式：

body {
  height: 100vh; /* 用vh确保页面占满整个视口高度 */
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免图片超出产生滚动条 */
}

#page-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#page-background img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心：保持图片比例，填充容器并裁剪多余部分 */
  object-position: center; /* 让图片主体居中显示 */
}

二、实现「自动轮换背景图」 #

分两种场景给你方案，按需选择：

方案1：前端无刷新自动轮换（更流畅） #

如果想要页面加载后自动切换图片，不用刷新页面，用JavaScript来实现最适合，还能加过渡动画：

第一步：PHP准备图片列表（传给JS）

<div id="page-background">
  <img id="bg-image" src="http://www.zarias.com/wp-content/uploads/2015/xxx.jpg" alt="背景图">
</div>

<?php
// 把所有背景图片链接存到数组里
$bgImages = [
  "http://www.zarias.com/wp-content/uploads/2015/xxx.jpg",
  "http://www.zarias.com/wp-content/uploads/2015/yyy.jpg",
  "http://www.zarias.com/wp-content/uploads/2015/zzz.jpg"
];
// 把PHP数组转成JS能识别的格式
echo "<script>const bgImages = " . json_encode($bgImages) . ";</script>";
?>

第二步：JS定时切换图片（带淡入淡出）

const bgImage = document.getElementById('bg-image');
let currentIndex = 0;
const switchTime = 5000; // 每5秒切换一次，可自行调整

function changeBg() {
  // 先淡出当前图片
  bgImage.style.opacity = 0;
  setTimeout(() => {
    // 切换到下一张图片（循环切换）
    currentIndex = (currentIndex + 1) % bgImages.length;
    bgImage.src = bgImages[currentIndex];
    // 淡入新图片
    bgImage.style.opacity = 1;
  }, 500);
}

// 页面加载完成后启动轮换
window.addEventListener('load', () => {
  bgImage.style.transition = 'opacity 0.5s ease'; // 设置过渡动画
  setInterval(changeBg, switchTime); // 定时执行切换
});

方案2：刷新页面随机换图（简单快捷） #

如果不需要自动切换，只想每次打开/刷新页面时换一张图，用PHP就能实现：

<div id="page-background">
<?php
$bgImages = [
  "http://www.zarias.com/wp-content/uploads/2015/xxx.jpg",
  "http://www.zarias.com/wp-content/uploads/2015/yyy.jpg",
  "http://www.zarias.com/wp-content/uploads/2015/zzz.jpg"
];
// 随机选一张图片输出
$randomPic = array_rand($bgImages);
echo '<img src="' . $bgImages[$randomPic] . '" alt="背景图">';
?>
</div>

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