Question

我有一个加载背景图片的div。此div的高度不能超过60px，但宽度可以扩展到任意数字，具体取决于图像宽度。

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

当前，我在div中有此CSS。使用background-size：contain对于高度大于60px的图像非常有效，但是当图像较小时，它会拉伸图像和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的设计方式并非如此。

元素的内容或任何set属性都可以。因此，您可以做的是通过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>元素。一旦创建它们，它们就会被加载。

根据背景图片大小调整div的大小

1 个答案: