如何让 div 高度自动匹配背景图片尺寸

通过 javascript 动态加载背景图并读取其原始尺寸，再将 div 宽高设为图片宽高，从而实现 div 自适应背景图大小，兼容主流浏览器且无需重复或额外 html 元素。

在 CSS 中，background-image 本身不参与文档流，因此无法直接驱动容器尺寸变化。若希望

的高度（及宽度）严格匹配背景图的原始像素尺寸（如 1920×1080），必须借助 JavaScript 获取图片真实宽高——因为 getComputedStyle(element).backgroundImage 仅返回 URL 字符串，不包含尺寸信息。

以下是一个轻量、兼容性好（支持 IE9+ 及所有现代浏览器）的纯 JS 实现方案（亦兼容 jQuery，但推荐原生写法以减少依赖）：

✅ 推荐：原生 JavaScript 方案（无 jQuery 依赖）

⚠️ 注意事项

• 避免内联样式污染：生产环境建议将背景图 URL 存于 data-bg 属性中（如 ），而非依赖 style 属性解析，更健壮且语义清晰。
• 响应式场景需重计算：若页面支持缩放或窗口调整，需监听 resize 并重新加载图片尺寸（注意节流）。
• CSS fallback：为未启用 JS 的用户，可设置合理默认宽高（如 min-height: 200px）与 background-size: contain，确保基础可用性。
• 性能优化：大量图片时建议预加载或使用 loading="lazy"（对 Image() 对象无效，但可结合 IntersectionObserver 懒执行）。

该方法绕过了 CSS 的固有限制，精准还原图片原始比例，是目前兼容性最强、语义最干净的“背景图驱动容器尺寸”解决方案。