Scale div to fit background image
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%;
}
Fit background image to div
You can achieve this with the background-size
property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
How to get div height to auto-adjust to background size?
Another, perhaps inefficient, solution would be to include the image under an img
element set to visibility: hidden;
. Then make the background-image
of the surrounding div the same as the image.
This will set the surrounding div to the size of the image in the img
element but display it as a background.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
CSS background image to fit height, width should auto-scale in proportion
background-size: contain;
suits me
Force div to have the size of background image
Well, the reason why this is?
In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.
With the background-image
solution, you use a background, which does not use space. The .imageContainer2
element can not know about the height of the background-image AND adapt itself to it.
This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you
Fit div size to background image
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
CSS background image - shrink to fit fixed size div
You're looking for background-size: contain
(see the MDN entry), not cover
. To get your example to work, you'll have to drop the background-attachment: fixed
. Use background-position: center
to center the background in your div
.
.container{ background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; height: 150px; width: 300px;}
<div class="container"></div>
Related Topics
How to Collapse Unused Row in a CSS Grid
How to Change Md-Input-Container Placeholder Color Using CSS in Angular Material
Change the Style of an Element If the Fragment Identifier (Hash) in the Url References It
Centering the Navbar Content in Bootstrap 4 (Alpha 5)
Bootstrap 4 - No Column Wrapping
CSS - Is There a Cousin Selector
Are "Top" and "To Top" the Same Direction for Linear Gradients
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets
Change the State According to Event in Reactjs
CSS :Not(:Last-Child):After Selector
Difference Between CSS3 Transitions' Ease-In and Ease-Out
Position Last Flex Item at the End of Container
Chrome Device Mode Emulation Media Queries Not Working
Input Type=Submit Text Vertical Alignment in Firefox
How to Stretch Children to Fill Cross-Axis