css - 根据背景图片大小调整div

Question

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

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

目前，我为 div 准备了这个 css。使用 background-size: contain 对于高度大于 60px 的图像非常有效，但是当图像较小时它会拉伸(stretch)图像和 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 时都会显示原始图像

谢谢

Answer 1

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

元素的内容或任何设置的属性都可以。所以你可以做的是，通过 JavaScript，创建一个 <img>与 backgroundImage 来源相同的标签.在其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>元素。一旦您创建它们，它们就会被加载。