将div元素的大小调整为其背景图像大小

Question

是否有可能<div>适应其背景图像？我的意思是保持宽度和高度的比例.

澄清:

• 的div变化宽度.(这是一个响应式设计)

• 我并不是要让背景适应div.这是可能的background-size.但我要问的是循环方式:在背景中拥有一个图像,并让div父级适应该图像,无论其大小如何.

• 我知道如果我将图像放在html中而不是在后台,我可以做类似的事情.但在这种情况下,我无法更改不同设备大小的图像.所以我要求将图像放在后台,以便能够使用CSS更改它.

在我给出的例子中,我可以使图像适应宽度,但我得到了与高度的差距.我可以使div适应图像的高度,因为图像会改变它的大小吗？以另一种方式问:在响应环境中,可以使用图像背景的div,在不留空的情况下改变大小吗？

这是一个可以玩的例子.

CSS:

#image {
    margin:0px auto; 
    width:90%;
    max-width:512px;
    height:512px; /* I need to give heigt to make it visible? */

    background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:yellow;/*just to make visible the gap in the height*/
}

HTML:

<div id="image"></div>

Answer 1

不,不可能让div适应它的背景图像.

因为它是"无意义的"

这是如何:

div的大小由其"内容"决定,或者其尺寸是否明确设置.由于背景图像不属于任何这些类别,因此您可以看到它是不可能的.

你能做的是:

HTML

<div class="image-controlled">
  <img>...</img>
  <div class="content">...</div>
</div>

CSS

 .image-controlled {
   position: relative; 
   overflow: hidden <-- optional, if you want to cut off .content which overflows the image boundaries
 }
 .content {
   position: absolute;
   top: 0; left: 0; <-- position of the content as it should be (normally)
 }

div现在将是图像的大小,并将在.content其上显示.

另请注意,.contentdiv可以高于或低于<img>外观顺序,但效果会相同.但是,如果您应用position的财产img元素太多,那么你就需要设置z-index的.content更大的比的<img>