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