How to make header's height depend on background image height?

Question

Trying to find the answer quite long, but I am not even sure how to express the question to searchbar - so I'll try to explain here and if you know that it was already answered I will be happy for the link :)

I am creating a wordpress theme using The Underscores framework. I want make my header to be dependent on the background image height. I mean - I can upload there an image of any size and header's width will be 100 % of image and height wll be dynamically change according the screen size.

Better for imagination, here's an example: http://hitchdiary.cz/

Try to change size of the window - image is allways fully displayed and the height of the header changes.

So that's what I want. What I have is a static size header and background image is adjusting according the screen size.

.site-header {            
    height: 100%;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

Header image is set by user in wordpress adjust section. In code it is this way:

<?php if ( get_header_image() ){ ?>
            <header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner">
    <?php } else { ?>
            <header id="masthead" class="site-header" role="banner">
    <?php } ?>

Thanks for any advice. Sorry if that's obvious. I'm quite a newbie.

WHAT'S GOING NOW:

demo

Answer 1

The height is calculated automatically according to the content in the div. By setting it to 100% you're telling it to take the height of the parent container.

Setting height to auto will solve your problem.

.site-header {            
    width: auto;
    background-color: #000;
    background-size: 100%;
}

or 

.site-header {            
    height: auto;
    width: auto;
    background-color: #000;
    background-size: 100%;
}

Flexible Width

Sorry I mistook it to be flexible width instead of height. Please ignore what comes below this statment. However it might help you in adjusting width in the future.

By default div, header, footer etc are block elements. They take up 100% of the parent div.

Say you have a

<div class="parent" style="width:500px;">
    <div class="child"> </div>       
</div>

Here the inner div takes up 500px as well.

I tried out similar code, all you have to do set display to inline.

.site-header {
    display: inline;
}

You can even try floating it to the left/right in case making it inline doesn't work.

You can read more about the differences between block and inline