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