CSS - Ustaw szerokość Div 100% i Resize Keeping Aspect Ratio

Mam div z obrazem tła, który nałoży część pokazu nagłówka. Chcę, aby szerokość div zawsze była równa 100% rozmiaru okna, nawet jeśli użytkownik zmieni jego rozmiar. Wysokość powinna się zmieniać w zależności od współczynnika kształtu obrazu tła. Wymiary obrazu tła to 1500 x 406.

Oto przykładowy kod:

HTML

<div id="wrapper" class="clearfix">
    <div id="bg_img"></div>
</div>


CSS

.clearfix {
    width: 100%;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.5;
}

#bg_img {
    background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
    position: absolute;
    z-index: 100;
    top: 9em;
    width: 100%;
    height: 406px;
    margin: 0 auto;
    display: inline;
}


PracowaćJSFiddle

questionAnswers(4)

yourAnswerToTheQuestion