Scale div to fit background image - html

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)

Answer 4

body{ margin: 0; padding: 0}
#box1{
background: url(http://lorempixel.com/400/200/food/);
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 100vh;
display: table;
}
h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}
<div id="box1">
<h1>Code Bluster BILU </h1>
</div>