将DIV大小设置为背景图像的大小 [英] Size the DIV to the size of the background image

问题描述

我有以下风格的DIV

  .vplayer-container .logo 
 {
位置：绝对; 
 bottom：50px; 
 right：10px; 
 background：url（../ img / logo.png）no-repeat; 
 border：1px solid＃000000; 
最大宽度：50px; 
最大高度：50px; 
} 
  

我希望DIV大小与背景图像相同。由于bg图像发生变化，我希望它自动设置。我可以使用JavaScript，但我更喜欢CSS的方式。

我针对的是 HTML5浏览器，即FireFox，Webkit和Opera。

谢谢

答案：

使用 Kyle Sevenoaks 提示，您可以通过在DIV中放置一个图像元素来完成它。

 < DIV> 
< img src =url> 
< / div> 
  

移除Background属性，不需要其他样式。

解决方案

CSS无法做到这一点，div从它的内容中获取尺寸。背景图像纯粹是造型的标志。

你应该可以用Javascript来做到这一点，找到高度和宽度值并将它们注入到内联样式中就可以了：）

您也可以在 .logo div内使用< img> 标记。这会产生你想要的。

I have a DIV with the following style

.vplayer-container .logo
{
 position: absolute;
 bottom: 50px;
 right: 10px;
 background: url(../img/logo.png) no-repeat;
 border: 1px solid #000000;
 max-width: 50px;
 max-height: 50px;
}

I want that the DIV size is the same as the background image. Since the bg image change, I want it to be set automatically. I can use JavaScript, but I'd prefer a CSS way for that.

I'm targeting HTML5 browsers that is FireFox, Webkit and Opera.

Thanks

Answer:

With Kyle Sevenoaks hint, you can do it by putting an image element inside the DIV.

<div>
<img src="url">
</div>

Remove the Background property and no other styling is needed.

解决方案

CSS can't do this, the div gets its dimensions from the content within it. The background image is purely a mark of styling.

You should be able to do this with Javascript, finding the height and width values and injecting them into an inline style should do it :)

You can also use an <img> tag within the .logo div. This would produce what you intend.

这篇关于将DIV大小设置为背景图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！