Rozszerzanie boxa względem rozdzielczości

0

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:
skalowanie.png

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

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) {}
0

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

0

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.

0

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

0

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

0

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?

0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0