未知图片尺寸时，如何为background:url()中的图片设置原始宽高？

嗨，我来帮你搞定这个背景图显示的问题～

你遇到的核心问题其实是容器的百分比宽高没有可参照的父元素尺寸：当你给容器设置height: 100%和width: 100%时，如果它的父元素（比如<body>或上层容器）没有明确的宽高值，这个百分比就相当于“无尺寸”，容器自然是空的，背景图也就没法显示出来。加上你不知道图片的原始尺寸，直接用background-size: contain也找不到合适的容器比例来适配。

下面给你两种实用的解决方案，针对不同的需求场景：

方案1：用JS获取图片原始尺寸，固定容器大小 #

如果希望容器完全匹配图片的原始尺寸，我们可以先通过JavaScript加载图片，拿到它的真实宽高后再赋值给容器：

// 创建一个图片对象来加载目标图片
const bgImage = new Image();
bgImage.src = 'https://img.com/1000061770.jpg';

// 图片加载完成后执行
bgImage.onload = function() {
  const container = document.querySelector('.bg-container');
  // 把容器的宽高设置为图片的原始尺寸
  container.style.width = `${this.width}px`;
  container.style.height = `${this.height}px`;
}

对应的容器CSS可以保持简洁：

.bg-container {
  background: url('https://img.com/1000061770.jpg') no-repeat center;
  background-size: contain;
}

方案2：用JS获取宽高比，让容器自适应父元素 #

如果希望容器能自适应父容器的宽度，同时保持图片的原始比例，可以用aspect-ratio属性（现代浏览器都支持）：

const bgImage = new Image();
bgImage.src = 'https://img.com/1000061770.jpg';

bgImage.onload = function() {
  const container = document.querySelector('.bg-container');
  // 设置容器的宽高比为图片的原始比例
  container.style.aspectRatio = `${this.width}/${this.height}`;
  // 让容器宽度占满父元素，高度会自动按比例计算
  container.style.width = '100%';
}

CSS调整成这样：

.bg-container {
  background: url('https://img.com/1000061770.jpg') no-repeat center;
  background-size: contain;
  max-width: 100%; /* 防止图片超出父容器范围 */
}

补充说明：为什么之前的100%无效？ #

如果你的容器是直接放在<body>里，那需要先给<html>和<body>设置明确的高度，否则height: 100%没有参照：

html, body {
  height: 100%;
  margin: 0;
}

但这种方式只适合需要全屏背景的场景，如果图片本身不是全屏尺寸，会导致容器留白或拉伸，所以还是用JS获取图片尺寸的方法更精准。

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