W CSS, w jaki sposób skalowad wielokrotnie nakładane obrazy w sposób responsywny?

Question

mam wiele obrazów nakładka na szczycie tle, oto przykład:

<div style="position: relative; left: 0; top: 0;"> 
    <img src="images/background.png" style="position: relative; top: 0px; left: 0px;"/> 
    <img src="images/overlay1.png" style="position: absolute; top: 20px; left: 20px; "/> 
    <img src="images/overlay2.png" style="position: absolute; top: 40px; left: 40px; "/> 
</div> 

Powyższy fragment działa, jeśli przeglądarka jest w trybie pełnoekranowym. Jeśli zmniejszę rozmiar przeglądarki, tylko background.png jest odpowiednio skalowany, ale overlay1.png i overlay2.png oba zachowały ten sam rozmiar ustalony na ich pozycjach. Próbowałem zmienić atrybuty wszystkich pozycji na relative, ale obrazy nakładki pojawiają się w niewłaściwych miejscach.

Jak mogę to zmienić, aby wszystkie obrazy w znaczniku div mogły poprawnie skalować się względem siebie? BTW, używam Twitter Bootstrap 2.3.2 jako domyślnego motywu CSS.

Więcej informacji. Wszystkie obrazy mają ustalony rozmiar, np. tło to 640x480, pokazane w pozycji 0, 0. Obrazy nakładki mają również stały rozmiar i muszą przejść do określonych pozycji w stosunku do obrazu tła. na przykład nakładka może wynosić 64x64 i przechodzi do pozycji 15, 24 (góra, lewo), inna może 128x128 i przechodzi do pozycji 200, 231 itd. Dzięki temu dokładnemu nałożeniu pozycji tło + nakładki stają się kompletnym obrazem.

Answer 1

Aby zachować wszystko w skali podczas zmiany rozmiaru okna przeglądarki, należy użyć wartości procentowych zarówno dla rozmiaru, jak i położenia nakładek.

w twoim przypadku wszystko jest ustalone tak, że to tylko kwestia konwersji pikseli procentach, do tego trzeba prostego wzoru:

% value = px value/container px value * 100 

Na przykład dla Overlay 1 rozmiarów: (o rozmiarach 64x64) Pozycja: (24,15):

width = 64/640*100 = 10% 
top = 15/480*100 = 3.125% 
left = 24/640*100 = 3.75% 

teraz wystarczy ustawić nakładki być absolutnie pozycja i zastosować odpowiednie wartości dla każdej nieruchomości:

.container { 
    position:relative; 
    width: 100%; 
    max-width: 640px; 
    line-height: 0; 
} 

.container img{ 
    max-width: 100%; 
} 

.overlay1{ 
    width: 10%; 
    position: absolute; 
    top: 3.125%; 
    left:3.75%; 
} 

.overlay2{ 
    width: 20%; 
    position: absolute; 
    top: 41.666%; 
    left: 36.09%; 
} 

Sprawdź Demo fiddle