Rozszerzanie boxa względem rozdzielczości

Cześć,
próbuję wykonać coś takiego aby obrazek zawarty w danym boxie(kontenerze) skalował się względem rozdzielczości. Konkretniej chodzi o skalowanie samego boxa, bo ze zmianą rozdzielczości przeskakuje on o kilkadziesiąt pikseli w dół lub w górę.
Przykład dla rozdzielczości 320px:

A tu już mamy dla rozdzielczości 375 px:

Dla każdej rozdzielczości "zostaje trochę boxa" na spodzie. Jak temu zaradzić?

Kod HTML:

<div id="header">
    	<div class="fadein">
    		<img src="img/butterfly.jpg">
                <img src="img/butterfly2.jpg">
	</div>
</div>

A tak wygląda kod CSS:

#header {
      height: auto;
      background:none;
      position:relative;
      -moz-box-shadow: 0 0 5px #888;
          -webkit-box-shadow: 0 0 5px#888;
       box-shadow: 0 0 5px #333;
       top: 160px;
       max-width: 100%;
  }
  .fadein { position:relative; max-width: 100%; }
  .fadein img { position:absolute; }

Może mi ktoś coś poradzić, bo nie mogę nic wymyśleć.

Oczywiście kod jest zawarty pomiędzy

@media (max-width: 1024px) {}

Spróbuj wykorzystać lub podpatrzeć Bootstrap i klasę img-responsive

Ta klasa jest mniej więcej tak samo wykonana jak moja. Mimo to nie działa i zachowuje się tak sam zarówno przy użyciu bootstrapa jak i mojej klasy.

Tylko jest jeden mały szczegół, ty tą klasę przypisujesz do kontenera a nie do obrazka, Bootstrapową klasę img-responsive ustawia się obrazkom.

Nie do końca rozumiem. Można prosić przykład?

Tą klasę z max-width i height powinineś przypisać do tagu a nie kontenera <div>, dlatego pisałem to Bootstrap bo to sprawdzone rozwiązanie, po co wymyślać koło na nowo?

Tylko, że u mnie musi pozostać taki układ elementów. Inaczej nie wykonują się przejścia między zdjęciami.