css 如何将div高度设置为背景图像？

nxagd54h 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(159)

我试图实现的是，DIV的高度将根据图像大小而变化（无重复）
我正在寻找一个具有广泛的浏览器支持的解决方案，我已经尝试了几乎每一个答案，我在谷歌上找到的，没有真正的工作

<!DOCTYPE html>
<html>
<head>
<style> 
#div_1 {
  width: 250px;
  height: 250px;
  background-image: url("https://i.ibb.co/YRwty0q/11.jpg");
}
#div_2 {
  width: 250px;
  height: 250px;
  background-image: url("https://i.ibb.co/khjZcj2/222.jpg");
}

</style>
</head>
<body>

<div id="div_1"></div>
<div id="div_2"></div>
<script>
  

</script>
</body>
</html>

css

来源：https://stackoverflow.com/questions/75301752/how-to-set-div-height-as-background-image

1条答案

按热度按时间

af7jpaap1#

使用Javascript加载图像：

$('div').each(function() {
  const url = getComputedStyle($(this)[0])['background-image'].slice(5, -2)
  const img = new Image()
  img.src = url
  img.onload = () => {
    $(this).css({
      width: img.width,
      height: img.height
    })
  }
})

#div_1 {
  background-image: url("https://i.ibb.co/YRwty0q/11.jpg");
}

#div_2 {
  background-image: url("https://i.ibb.co/khjZcj2/222.jpg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_1"></div>
<div id="div_2"></div>

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何将div高度设置为背景图像？

1条答案

相关问题

热门标签

最新问答