根据背景图像大小调整 div 大小答案

【问题标题】：Resize div according to background image size根据背景图像大小调整 div 大小
【发布时间】：2019-10-16 15:51:47
【问题描述】：

我有一个加载背景图像的 div。此 div 的高度不能超过 60 像素，但宽度可以根据图像宽度扩展到任意数字。

我希望所有正在加载的图像都具有原始尺寸而不会变得模糊。事实上，我的 div 应该根据图像大小调整大小，但不应超过 60px。

目前，我为 div 准备了这个 css。使用 background-size: contains 对于高度大于 60 像素的图像非常有效，但是当图像较小时，它会拉伸图像，而 background-size: auto 适用于较小的图像，但较大的图像会从 div 扩展。

.div{
  background-image: url("../assets/images/example.gif");
  background-size: contain;
  background-repeat: no-repeat;
  height: 60px!important;
  width: 500px!important;
}

我正在寻找一些 css，每次将 div 高度保持为 60px 时都会显示原始图像

谢谢

【问题讨论】：

您是否出于任何特殊原因使用 div 而不是 img 标签？
是的，我必须这样做。对此别无选择。
没有 JS 就做不到。
如果可以通过 css 实现，那么我不希望使用 JS。如果不走运，我将不得不使用 JS 来做一些检查。
这与运气无关。背景图像不能设置元素的大小。反之亦然。

标签： css sass css-selectors

【解决方案1】：

backgroundImage 不会调整元素的大小。 backgroundImage 不是这样设计的。

元素的内容或任何设置的属性都可以。所以你可以做的是，通过 JavaScript，创建一个与backgroundImage 具有相同源的<img> 标签。在其onload 事件中获取图像的大小并将div 的width 设置为该值。

按照这些思路：

const toResize = document.querySelectorAll('.bg-resize');
[...toResize].forEach(elem => {
  const img = document.createElement('img');
  img.src = elem.style.backgroundImage.slice(4, -1).replace(/"/g, "");
  img.onload = event => {
    elem.style.width = `${event.path[0].width}px`;
  };
})

.bg-resize {
  height: 60px;
  margin: 0 auto;
  background: transparent no-repeat center /cover;
}

<div class="bg-resize" style="background-image: url(https://via.placeholder.com/150)"></div>
<div class="bg-resize" style="background-image: url(https://via.placeholder.com/600x60)"></div>
<div class="bg-resize" style="background-image: url(https://via.placeholder.com/300x200)"></div>

请注意，您实际上不必附加 <img> 元素。一旦您创建它们，它们就会被加载。

【讨论】：