Ciao, potresti risolvere in vari modi.
In linea di massima mi vengono in mente 3 o 4 modi ma possono chiaramente essercene molti altri. Bisogna eventualmente valutare come vorresti procedere anche a seconda delle tue specifiche esigenze, della complessità del progetto, della flessibilità del codice e dell'accuratezza che vuoi ottenere, del supporto richiesto sui vari browser, e vari altri fattori legati anche al lato programmatico di tale caratteristica oltre che all'impostazione del CSS.
Magari è possibile che ci siano anche degli strumenti/sistemi già sviluppati per realizzare delle cose del genere. Non so se hai valutato anche questa possibilità e se hai già fatto delle ricerche in merito. Chiaramente non conoscendo nemmeno quale sia l'ambito del progetto, non ho idea se questa sia una possibilità che puoi prendere in considerazione
Non per demoralizzarti (anche perché non conosco assolutamente il tuo livello di preparazione in merito) ma mi sembra comunque un progetto non così semplice da sviluppare. Non ho capito comunque se già parte del progetto è sviluppata. Ad ogni modo, anche se tu dovessi scegliere un metodo tra i vari, il mio consiglio principale è quello di non pensare che ci sia una bacchetta magica per cui sia possibile applicare un "comando" e il tutto si materializzi dal nulla. Chiaramente dopo aver valutato un possibile metodo, ci si dovrà rimboccare le maniche per svilupparlo, applicarlo al progetto e testarlo.
Rispondendo comunque sul piano tecnico,
per la questione "responsive" presumibilmente converrà definire prima di tutto i breakpoints, impostando delle opportune media queries. Dalle tue indicazioni non è chiaro se ti serve avere informazioni anche su questa parte ma, in tal caso, puoi fare riferimento a qualche guida.il problema mi si pone nel responsive.....
Qualche soluzione:c'è modo di nn impazzire x ogni device? C'è qualche comando che può aiutare?
1) Potresti usare un contenitore principale (un div) dove inserire degli elementi <img> a cui applicare delle dimensioni (ed eventuali posizioni) con valori in percentuale. In questo modo, quando il contenitore viene ridimensionato, anche tutti gli elementi interni saranno ridimensionati di conseguenza.
2) Potresti inserire tutto dentro un contenitore principale quindi usare la proprietà transform a cui applicherai la funzione scale() impostata con opportuni valori in base agli eventuali breakpoints.
3) Potresti usare un unico div sul quale impostare dei "background multipli" opportunamente posizionati e dimensionati in percentuale così che, ridimensionando il div, tutte le immagini siano ridimensionate di conseguenza.
4) Potresti "realizzare" la composizione lato server, cioè con uno script lato server (ovviamente da sviluppare ad hoc se già non esiste qualcosa) che assembla opportunamente le varie immagini e restituisce un immagine singola al client (magari usando AJAX per aggiornare l'immagine al volo, secondo le opzioni scelte). Questo potrebbe facilitare la questione del "responsive" lato client ma chiaramente lo sviluppo di tutto il sistema, e soprattutto la parte lato server, potrebbe essere molto complesso.
Qualche ulteriore consiglio:
- Dal momento che stai usando delle immagini sovrapposte, magari è più opportuno che siano delle png (con trasparenza) anziché jpg, come hai indicato tu.
- Per facilitare il posizionamento dei vari elementi sull'immagine base, potrebbe essere più pratico realizzare tutte le immagini che abbiano le stesse dimensioni di quella base. Chiaramente dovrai preparare le varie immagini in modo che il disegno degli elementi coincida, nella posizione, con l'immagine di base. In questo modo l'impostazione del CSS risulterà molto più semplice a prescindere dal metodo utilizzato, perché non dovrai occuparti del posizionamento e dei possibili eventuali problemi/errori che questo può comportare.
Chiaramente sono giusto delle idee di base ma, ripeto, dovrai valutare tu e quindi procedere eventualmente nello sviluppo.
Buon proseguimento.
Rispondi quotando