11

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>
4

6 に答える 6

0

おそらくJavaScriptを使用して、画像へのURLを取得できます：

var img = document.getElementById('image').style.backgroundImage; 
var width = img.clientWidth;
var height = img.clientHeight;
document.getElemetById('image').style.width = width;
document.getElemetById('image').style.height = height;

スタイルシートだけでこれを行うことはできないと強く思います。

于 2013-08-18T09:25:47.137 に答える