通过 javascript 动态读取背景图片的原始尺寸，并将 div 的宽高设置为该尺寸，可实现 div 自适应背景图大小，兼容主流浏览器且无需重复或额外 dom 元素。
在 CSS 中，background-image 本身不会影响元素的盒模型尺寸——div 默认保持 0×0（无内容时）或由显式声明的 width/height 决定，无法自动响应背景图的实际像素尺寸。若希望 div 尺寸严格匹配背景图原始宽高（例如用于全屏横幅、卡片封面等场景），需借助 JavaScript 获取图片元信息。
✅ 推荐方案：动态加载并读取图片尺寸
以下为现代、轻量、无依赖（原生 JS）的实现方式（兼容 IE11+ 及所有现代浏览器）：
<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(selector = 'div[style*="background-image"]') {
document.querySelectorAll(selector).forEach(el => {
const style = getComputedStyle(el);
const bgUrl = style.backgroundImage;
// 提取 URL 字符串（兼容 url("...")、url('...')、url(...)）
const match = bgUrl.match(/url\(["']?([^"']+)["']?\)/i);
if (!match || !match[1]) return;
const img = new Image();
img.onload = () => {
el.style.width = `${img.width}px`;
el.style.height = `${img.height}px`;
el.style.backgroundSize = 'cover'; // 可选：确保图像填满且不拉伸
el.style.backgroundPosition = 'center';
};
img.onerror = () => console.warn(`Failed to load background image: ${match[1]}`);
img.src = match[1];
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', autoSizeDivs);
</script>⚠️ 注意事项
- CSS 不再需要预设 width/height：否则会覆盖 JS 设置的值；建议移除或设为 auto/initial。
- 避免重复执行：onload 回调仅触发一次，但需确保图片未被缓存导致 img.complete === true 却未触发 onload —— 安全写法是先检查 img.complete，再手动调用回调。
-
增强版兼容处理（推荐加入）：
if (img.complete) { // 图片已缓存，立即执行 setDivSize(); } else { img.onload = setDivSize; } - 无障碍与 SEO 提示：纯背景图无语义，若图片承载关键信息，应优先考虑 <img> + alt；本方案适用于装饰性背景场景。
✅ 总结
该方法不依赖 jQuery 或外部库，利用原生 Image() 对象异步获取真实尺寸，再注入 CSS 样式，兼顾兼容性、性能与可维护性。配合 background-size: cover 或 contain，还能灵活控制缩放行为，是响应式设计中“以图定容器”的可靠实践。
