如何让无内容的DIV完整显示backgroundImage背景图？

空DIV默认高度为0，所以背景图无法显示，不用加<br>这类冗余内容，通过CSS样式就能让DIV自动适配背景图尺寸，以下是几种实用方案：

1. 显式设置宽高（适合固定尺寸横幅） #

直接给DIV设置全屏宽度和固定高度，同时配置背景图的显示规则：

const websiteNav = document.getElementById("nav");
const banner = document.createElement("div");

banner.style.width = "100vw"; // 占满视口宽度
banner.style.height = "400px"; // 根据需求设置固定高度
banner.style.backgroundImage = "url('https://www.website.com/images/image.png')";
banner.style.backgroundSize = "cover"; // 背景图铺满容器，超出部分裁剪
banner.style.backgroundPosition = "center"; // 背景图居中显示
banner.style.margin = "0";
banner.style.padding = "0";

websiteBanner.appendChild(banner);

2. 用aspect-ratio适配图片比例（推荐现代浏览器） #

如果知道背景图的宽高比（比如16:9、4:3），用aspect-ratio属性让DIV自动按比例缩放，无需固定高度：

const websiteNav = document.getElementById("nav");
const banner = document.createElement("div");

banner.style.width = "100%"; // 占满父容器宽度
banner.style.aspectRatio = "16/9"; // 替换为你的图片实际宽高比
banner.style.backgroundImage = "url('https://www.website.com/images/image.png')";
banner.style.backgroundSize = "cover";
banner.style.backgroundPosition = "center";

websiteBanner.appendChild(banner);

注：aspect-ratio支持Chrome 88+、Firefox 89+等现代浏览器，若需兼容旧版浏览器，用下面的方案。

3. padding-top比例占位（兼容旧浏览器） #

利用CSS padding的百分比基于宽度计算的特性，通过padding-top撑开DIV高度，模拟图片比例：

const websiteNav = document.getElementById("nav");
const banner = document.createElement("div");

banner.style.width = "100%";
banner.style.height = "0"; // 让高度由padding-top控制
banner.style.paddingTop = "56.25%"; // 16:9比例对应9/16*100%，其他比例自行计算
banner.style.backgroundImage = "url('https://www.website.com/images/image.png')";
banner.style.backgroundSize = "cover";
banner.style.backgroundPosition = "center";
banner.style.position = "relative"; // 若后续要在横幅上加内容，需设为相对定位

websiteBanner.appendChild(banner);

4. 伪元素填充内容 #

给DIV添加::before伪元素，用空内容撑开容器，同时配合宽高或比例设置：

const websiteNav = document.getElementById("nav");
const banner = document.createElement("div");

// 基础样式
banner.style.width = "100%";
banner.style.aspectRatio = "16/9";
banner.style.backgroundImage = "url('https://www.website.com/images/image.png')";
banner.style.backgroundSize = "cover";
banner.style.backgroundPosition = "center";

// 添加伪元素样式（可选，若担心某些场景下高度不生效）
const style = document.createElement('style');
style.textContent = `
  .banner-container::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
  }
`;
document.head.appendChild(style);
banner.classList.add('banner-container');

websiteBanner.appendChild(banner);

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