将Div宽度设置为背景图片宽度的CSS方法？

Question

有没有一种纯CSS的方法，可以将您的div宽度设置为该div所使用的背景图片的宽度？

比如现在我正在这样做...

#homeNav{

    background-image:url(../images/navPieces/home.jpg);
    width:165px;
    text-align:right;

}
#aboutNav{

    background-image:url(../images/navPieces/about.jpg);
    width:81px;
    text-align:center;

}
#competitorsNav{

    background-image:url(../images/navPieces/competitors.jpg);
    width:117px;
    text-align:center;
}

我希望不必在每个div中都写入宽度信息，有什么建议吗？

- Howard Zoopaloopa

---

Nav？你确定那些不应该是gif或png吗？Jpeg有点...有损。 - BalusC

Answer 1

我所做的：

• 将背景图片设置为具有url（urlsrc）的div
• 向具有src = urlsrc的div添加img
• 使用.width()和.height()获取img大小
• 删除img
• 将div的CSS宽度和高度设置为先前计算的宽度和高度

很丑，但它有效:p

- oued

Answer 2

很遗憾，没有办法。CSS不知道指定背景图片的宽度。你可以使用一些JavaScript来预加载图像，然后设置div的宽度。

- Pat

---

当然了，我宁愿接受这个事实，也不想试图用 JS 来规避它。毕竟这就是我们拿薪水的原因。 - BalusC

糟糕。我猜CSS不能完成我想要的一切。 - Howard Zoopaloopa

Answer 3

.parent {
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
}

.parent1 {
 background-image: url("https://www.image-engineering.de/content/products/charts/te169/images/TE169.jpg");
}

.transparent-img{
    max-height:360px;
    opacity: 0;
}

 
<div class="parent parent1" id="homeNav">
   <img class="transparent-img" src="https://www.image-engineering.de/content/products/charts/te169/images/TE169.jpg">
 </div>  

oued 提供了一个巧妙的解答，但这是我用纯 CSS 所做的。

将背景大小属性设置为包含而非重复。在同一父元素上设置背景 URL 作为单独的类。 然后将不透明度设置为 0，以用于放置在父元素内的图像。 这种方式可以让您的 div 遵循透明图像的宽度，并显示出背景图像，并且它会很好地缩放。

- N. Djokic