是否可以制作一个< div>适应其背景图像?我的意思是保持宽度和高度的比例.
澄清:
> div改变宽度. (这是一个响应式设计)
>我不是要让背景适应div.这可以使用背景大小.但我要问的是循环方式:在背景中拥有一个图像,并使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('/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: