通过 javascript 动态加载背景图并读取其原始尺寸，再将 div 宽高设为图片宽高，从而实现 div 自适应背景图大小，兼容主流浏览器且无需重复或额外 html 元素。
在 CSS 中，background-image 本身不参与文档流，因此无法直接驱动容器尺寸变化。若希望 <div> 的高度（及宽度）严格匹配背景图的原始像素尺寸（如 1920×1080），必须借助 JavaScript 获取图片真实宽高——因为 getComputedStyle(element).backgroundImage 仅返回 URL 字符串，不包含尺寸信息。
以下是一个轻量、兼容性好（支持 IE9+ 及所有现代浏览器）的纯 JS 实现方案（亦兼容 jQuery，但推荐原生写法以减少依赖）：
✅ 推荐：原生 JavaScript 方案（无 jQuery 依赖）
<div id="div_1" style="background-image: url('https://i.ibb.co/YRwty0q/11.jpg');"></div>
<div id="div_2" style="background-image: url('https://i.ibb.co/khjZcj2/222.jpg');"></div>
<script>
function autoSizeDivs() {
document.querySelectorAll('div[style*="background-image"]').forEach(div => {
const style = getComputedStyle(div);
const bgUrl = style.backgroundImage;
// 提取 URL（兼容 url("...")、url('...')、url(...)）
const match = bgUrl.match(/url\(["']?([^"']*)["']?\)/i);
if (!match || !match[1]) return;
const img = new Image();
img.src = match[1];
img.onload = () => {
div.style.width = `${img.width}px`;
div.style.height = `${img.height}px`;
// 可选：添加 background-size: cover/contain 保证显示效果
div.style.backgroundSize = 'cover';
div.style.backgroundPosition = 'center';
div.style.backgroundRepeat = 'no-repeat';
};
img.onerror = () => console.warn(`Failed to load background image: ${match[1]}`);
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', autoSizeDivs);
</script>⚠️ 注意事项
- 避免内联样式污染：生产环境建议将背景图 URL 存于 data-bg 属性中（如 <div data-bg="...">），而非依赖 style 属性解析，更健壮且语义清晰。
- 响应式场景需重计算：若页面支持缩放或窗口调整，需监听 resize 并重新加载图片尺寸（注意节流）。
- CSS fallback：为未启用 JS 的用户，可设置合理默认宽高（如 min-height: 200px）与 background-size: contain，确保基础可用性。
- 性能优化：大量图片时建议预加载或使用 loading="lazy"（对 Image() 对象无效，但可结合 IntersectionObserver 懒执行）。
该方法绕过了 CSS 的固有限制，精准还原图片原始比例，是目前兼容性最强、语义最干净的“背景图驱动容器尺寸”解决方案。
