css auto adjust div height depending on background height

Question

div {
    display:block;
    width:320px;
    background:url('images/cnon.jpg');
    background:contain;
}

Is there any way to auto-adjust <div> height depending on background height?

Possible duplicate of [How to get div height to auto-adjust to background size?](http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size) — John Slegers, Mar 07 '16 at 17:47

score 0 · Answer 1 · answered Mar 07 '16 at 17:58

0

I can't understand what do you actually want, but if you want to make div fully aligned to background:

div {
    display:block;
    width: auto;
    height: auto;
    background:url('images/cnon.jpg');
    background:contain;
    margin: -10px; //Optional
}

Sorry if i didn't understood your question well.

answered Mar 07 '16 at 17:58

Stefan Đorđević

565
1
4
22

if this div is empty that means the height and width will be 0! – Peter Wilson Mar 07 '16 at 18:57
i got a slide show ... i got different size images for responsive ... how do i use different size images in slideshow? – Jay Mar 08 '16 at 06:57

score 0 · Answer 2 · answered Mar 07 '16 at 19:19

0

if you could use jQuery you can handle it simply by checking on the img height then apply this height to the div itself

answered Mar 07 '16 at 19:19

Peter Wilson

4,150
3
35
62

score 0 · Answer 3 · edited Aug 18 '16 at 17:10

You can adjust the height of div, adjusting the padding top of the div, just need to set the css automatically.

.div_image{
    background:url('images/cnon.jpg');
    height: 0;
    width: 100%;
    background-size: contain;
    padding-top: 20%;
}

The padding-top is calculated by a formule.

(image-height[px] / image-width[px]) * container-width[%]

Example: (274px / 1370px) * 100% = 20%

With this result the padding-top need to be 20%.

css auto adjust div height depending on background height

3 Answers3