Css: How to Set Container Size Equal to Background Image Size

CSS: How to set container size equal to background image size

Instead of using a background image, you could use a img element and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the img is the only thing in the flow, the containing div will resize relative to the image.

Pretty much a hack, but I think it would give the effect you are looking for.

http://jsfiddle.net/Km3Fc/

HTML

<div class="wrap">
    <img src="yourImg.jpg" />
    <div class="content">
        <!-- Your content here -->
    </div>
</div>

CSS

.wrap {
    display: inline-block;
    position: relative;
}

.wrap img + .content {
    position: absolute;
    top: 0;
    left: 0;
}

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>

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

Div same size as background image

Would something like the following work for you:

https://jsfiddle.net/44k0320v/

I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).

I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.

I've also updated the font size to also use vw units.

New css below:

#headerimg{
    background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
    background-size: 100%;
}

.header{
    box-sizing: border-box;
    height: 50vw;
    width: 100%;
    margin: auto;
    padding: 10% 20%;
    color: white;
    text-align: center;
    font-size: 3.5vw;
}

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

Scale background image width to the size of the div

Background size will work, but the aspect ratio of the image will be changed. 500px below is the known height.

.myDiv {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-size: 100% 500px;
}

More info on background-size here, it's not supported on <= IE8.

Or alternatively you could absolutely position an image relative to the container, but background-size is better.

img.cover {
    width:100%;
    height:100%;
    position:absolute:
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
}

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

---

Related Topics