将 div 元素调整为其背景图像大小 [英] Resize a div element to its background image size
问题描述
是否可以使 <div>
适应其背景图像?我的意思是保持宽度和高度的比例.
Is it possible to make a <div>
adapt to its background image? I mean to maintain the proportions width and height.
澄清:
div
改变宽度.(这是一种响应式设计)
The
div
change the width. (it is a responsive design)
我不是说让背景适应div.这可以通过 background-size
实现.但我要问的是方法:在背景中有一个图像,让 div 父级适应该图像,无论其大小是多少.
I do not mean to make the background adapt to the div. This is possible with background-size
. But what I am asking is the way round: to have a image in the background and make the div parent adapt to that image whatever its size is.
我知道如果我将图像放在 html 中,而不是放在背景中,我可以做类似的事情.但在这种情况下,我无法更改不同设备尺寸的图像.所以我要求将图像放在背景中以便能够使用 CSS 更改它.
I know that I can do something similar if I put the image in the html, and not in the background. But in this case, I could not change the image for different device sizes. So I am asking to put the image in background to be able to change it with CSS.
在我给出的示例中,我可以使图像适应宽度,但与高度存在差距.当图像改变它的大小时,我可以让 div 也适应图像的高度吗?换一种方式问:在响应式环境中,带图片背景的div能否在不留空白的情况下改变大小?
In the example I give, I can make the image adapt to the width but I get a gap with the height. Can I make the div adapt to the height too of the image , as the image changes its size? Asked in another way: In a responsive environment, can a div with an image background, change in size without leaving empty spaces ?
这里是示例.
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 适应它的背景图像.
No it is NOT possible to adapt a div to it's background image.
因为它是无意义的"
是这样的:
一个 div 的大小是由它的内容"决定的,或者它的尺寸是专门设置的.由于 background-image 不属于这些类别中的任何一个,您可以看到这是不可能的.
A div's size is determined by its "content", or if its dimensions are SPECIFICALLY set. Since the background-image does not fall into any of these categories, you can see that it's impossible.
你可以这样做:
<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
将显示在它上面.
The div will now be the size of the image, and the .content
will be shown over it.
另请注意,.content
div 可以按出现顺序位于 的上方或下方,但效果相同.但是,如果你也对
img
元素应用 position
属性,那么你需要设置 的
大于 z-index
.content<img>
Also note that the .content
div can come above or below the <img>
in order of appearance, but the effect would be the same. But, if you apply a position
property on the img
element too, then you'll need to set the z-index
of .content
greater than that of <img>
这篇关于将 div 元素调整为其背景图像大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!