Scale div to fit background image

Question

I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.

Here is the html:

<div id="mainHeaderWrapper">


</div><!--end mainHeaderWrapper-->
<br class="clear" />;

Here is the css:

    #mainHeaderWrapper{


     background: url(http://localhost/site/gallery/bg1.jpg);
     width: 100%;
     height: auto;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     background-size: 100% 100%;

     background-repeat: no-repeat;
     background-position: center center; 

 }

 .clear { clear: both; }

Thanks for any and all help

Answer 1

Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0

<div id="mainHeaderWrapper">    <img src="path/to/image.jpg"><!-- I'm invisible! --> </div> 

set that image to

#mainHeaderWrapper {     background: no-repeat url(path/to/image.jpg) 50% / 100%; } #mainHeaderWrapper img {     vertical-align: top;     width: 100%; /* max width */     opacity: 0;  /* make it transparent */ } 

That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.

Need some content inside that DIV?

Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element

<div id="mainHeaderWrapper">    <img src="path/to/image.jpg"><!-- I'm invisible! -->    <div>Some content...</div> </div> 

#mainHeaderWrapper{     position: relative;     background: no-repeat url(path/to/image.jpg) 50% / 100%; } #mainHeaderWrapper > img{     vertical-align: top;     width: 100%; /* max width */     opacity: 0;  /* make it transparent */ } #mainHeaderWrapper > div{     position: absolute;     top: 0;     width: 100%;     height: 100%; } 

Answer 2

If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0 and set vertical padding to a percentage of the width.

They key to this method is that percentage-based vertical padding is always related to width.

According to the box model (w3.org):

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-top is set to 50%;

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top: 50%;   background-image: url('https://dummyimage.com/400x200/');   background-size: 100% auto;   background-repeat: no-repeat; }

<div id="mainHeaderWrapper"></div> stuff below the image

In another example, the image is 300px X 100px. The height is ⅓ of the width, so the padding-top is set to 33.33%:

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top:33.33%;   background-image: url('https://dummyimage.com/300x100/');   background-size: 100% auto;   background-repeat: no-repeat; }

<div id="mainHeaderWrapper"></div> stuff below the image

---

Edit:

As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.

#mainHeaderWrapper {   width: 100%;   height: 0;   padding-top: 33.33%;   background-image: url('https://dummyimage.com/300x100/');   background-size: 100% auto;   background-repeat: no-repeat; }  div#inner_content {   position: absolute;   top: 0;   width: 100%;   margin-top: 10%;   color: #FFF;   text-align: center;   font-size: 20px; }

<div id="mainHeaderWrapper">   <div id="inner_content">Hello World</div> </div> stuff below the image

Answer 3

This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.

The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:

height: calc((100vw * W) / H); So mine would read: height: calc((100vw * 47) / 96);

No need to worry about the contents of the div either (unless they dont fit)