调整div元素到它的背景图片大小 [英] Resize a div element to its background image size

问题描述

是否有可能使一个＆LT; D​​IV＆GT; 适应它的背景图片？我的意思是要保持比例的宽度和高度。

澄清：

• 的 DIV 更改宽度。 （这是一个响应式设计）




• 我并不想使背景适应股利。这是可能的背景大小。但我要问的是倒过来：有在背景图像，使DIV父适应这种形象不管其规模是




• 我知道我可以做同样的事情，如果我把图像中的HTML，而不是在后台。但在这种情况下，我不能为不同的设备尺寸更改图像。所以，我要求把图像中的背景能够与CSS来改变它。

在我给的例子，我可以使图像适应宽度，但我得到了高度的差距。我可以股利适应高度太形象，作为图像改变其大小？当被问及以另一种方式：在一个快速响应的环境，可以与图像背景的div，大小不留空格更改

下面是的例子的发挥。

CSS：

#image {
    保证金：0px auto的;
    宽度：90％;
    最大宽度：512像素;
    身高：512; / *我需要给heigt以使其可见？ * /    背景图像：网址（'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'）;
    背景重复：不重复;
    背景尺寸：100％;
    背景色：黄色; / *只是为了可见的高度差距* /
}


HTML

 ＆LT; D​​IV ID =形象＆GT;＆LT; / DIV＆GT;
 

解决方案

没有是不可能的，以适应一个div到它的背景图片。

由于它是毫无意义的

这是如何：

一个分区的大小是由它的内容决定，或者如果它的尺寸专门设置。
由于背景图像不属于任何一类，你可以看到，这是不可能的。

你可以做的是这样的：

HTML

 ＆LT; D​​IV CLASS =图像控制＆GT;
  ＆LT; IMG＆GT; ...＆LT; / IMG＆GT;
  ＆LT; D​​IV CLASS =内容＆GT; ...＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS

 在图像配控制{
   位置：相对;
   溢出：隐藏＆LT;  - 可选，如果你想切断.content其溢出图像边界
 }
 .content {
   位置：绝对的;
   顶部：0;左：0; ＆LT;  - 内容的位置，因为它应该是（常）
 }
 

的分区现在将图像的大小和 .content 将显示在它

---

另外请注意， .content DIV可以来的上方或下方LT ＆;按出场顺序; IMG＆GT ，但效果是相同的。但是，如果你申请一个位置的 IMG 元素的属性也一样，那么你就需要设置<$ IMG＆GT; .content 比更大的＆LT的C $ C>的z-index >

Is it possible to make a <div> adapt to its background image? I mean to maintain the proportions width and height.

Clarification:

• The div change the width. (it is a responsive design)

• 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.

• 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.

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 ?

Here is the example to play.

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>

解决方案

No it is NOT possible to adapt a div to it's background image.

Because it is 'senseless'

This is how:

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.

What you CAN do is this:

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)
 }

The div will now be the size of the image, and the .content will be shown over it.

---

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屋！