In CSS, come ridimensionare più immagini sovrapposte in modo reattivo?

Question

ho più immagini sovrapposto sulla cima di uno sfondo, ecco un esempio:

<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> 

È possibile che questo frammento di codice funziona se il browser è in modalità a schermo intero. Se riduco le dimensioni del browser, solo lo sfondo.png viene ridimensionato di conseguenza, ma overlay1.png e overlay2.png restano entrambi della stessa dimensione fissati alle loro posizioni. Ho provato a modificare tutti gli attributi di posizione su relative ma le immagini di sovrapposizione sono visualizzate nei punti sbagliati.

Come si può eseguire il refactoring per consentire a tutte le immagini all'interno di un tag div di ridimensionarsi correttamente l'una rispetto all'altra? A proposito, sto usando Twitter Bootstrap 2.3.2 come tema CSS predefinito.

Ulteriori informazioni. Tutte le immagini hanno dimensioni fisse, ad es. lo sfondo è 640x480, mostrato nella posizione 0, 0. Le immagini di sovrapposizione hanno anche dimensioni fisse e devono essere posizionate in determinate posizioni rispetto all'immagine di sfondo. per esempio. una sovrapposizione può essere 64x64 e va in posizione 15, 24 (in alto a sinistra), un'altra 128x128 e va in posizione 200, 231, ecc. Con questa sovrapposizione di posizione precisa, lo sfondo + le sovrapposizioni diventa un'immagine completa.

Answer 1

Per mantenere tutto in scala durante il ridimensionamento della finestra del browser, è necessario utilizzare i valori percentuali per la dimensione e la posizione degli overlay.

Nel tuo caso tutto è fissato in modo che sia solo una questione di conversione dei pixel di percentuali, per questo è necessario il semplice formula:

% value = px value/container px value * 100 

Ad esempio, per Overlay 1 Dimensioni: posizione (64x64): (24,15):

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

Ora basta impostare le sovrapposizioni di essere assolutamente la posizione e applicare i valori corretti per ogni proprietà:

.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%; 
} 

Scopri i Demo fiddle