17370845950

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

在 CSS 中，background-image 本身不会影响元素的盒模型尺寸——div 默认保持 0×0（无内容时）或由显式声明的 width/height 决定，无法自动响应背景图的实际像素尺寸。若希望 div 尺寸严格匹配背景图原始宽高（例如用于全屏横幅、卡片封面等场景），需借助 JavaScript 获取图片元信息。

✅ 推荐方案：动态加载并读取图片尺寸

以下为现代、轻量、无依赖（原生 JS）的实现方式（兼容 IE11+ 及所有现代浏览器）：

⚠️ 注意事项

• CSS 不再需要预设 width/height：否则会覆盖 JS 设置的值；建议移除或设为 auto/initial。
• 避免重复执行：onload 回调仅触发一次，但需确保图片未被缓存导致 img.complete === true 却未触发 onload —— 安全写法是先检查 img.complete，再手动调用回调。
• 增强版兼容处理（推荐加入）：

  if (img.complete) {
    // 图片已缓存，立即执行
    setDivSize();
  } else {
    img.onload = setDivSize;
  }

• 无障碍与 SEO 提示：纯背景图无语义，若图片承载关键信息，应优先考虑 + alt；本方案适用于装饰性背景场景。

✅ 总结

该方法不依赖 jQuery 或外部库，利用原生 Image() 对象异步获取真实尺寸，再注入 CSS 样式，兼顾兼容性、性能与可维护性。配合 background-size: cover 或 contain，还能灵活控制缩放行为，是响应式设计中“以图定容器”的可靠实践。