是否可以制作一个< div>适应其背景图像？我的意思是保持宽度和高度的比例.
澄清：
> div改变宽度. (这是一个响应式设计)
>我不是要让背景适应div.这可以使用背景大小.但我要问的是循环方式：在背景中拥有一个图像,并使div父级适应该图像,无论其大小如何.
>我知道如果我将图像放在html中而不是在后台,我可以做类似的事情.但在这种情况下,我无法更改不同设备尺寸的图像.所以我要求将图像放在后台,以便能够用CSS更改它.
在我给出的例子中,我可以使图像适应宽度但我与高度有差距.我可以让div适应图像的高度,因为图像会改变它的大小吗？以另一种方式问：在响应环境中,可以使用图像背景的div,在不留空的情况下改变大小吗？
这是the example玩.
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>
解决方法
不,不可能让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将显示在它上面.
另请注意,.content div可以高于或低于< img>按照外观的顺序,但效果会一样.但是,如果你也在img元素上应用了一个position属性,那么你需要将.content的z-index设置为大于< img>的z-index.
