Rendere Immagini sfondo righe responsive 
Autore: Francesco C.
Visite 1865,
Followers 2,
Condiviso 0
Salve, come da titolo, vorrei poter rendere responsive le immagini di sfondo in stile righe sui miei progetti (sia immagini singole che sequenze di immagini).
Magari si potesse anche per i testi (uso l'oggetto titolo, che si autogiustifica correttamente, ma io vorrei poter rimpicciolire i caratteri e le immagini in maniera proporzionale in modo da avere la stessa resa visiva che si ha nella visualizzazione desktop).
Con l'aiuto di Giuseppe Guida, con l'oggetto content slider ho potuto risolvere.
È possibile risolvere anche qui?
Grazie.
Immagini in sequenza e oggetto titolo subito sotto l'header.
Postato il
per le immagini in background puoi provare questo, in proprietà pagina, tab esperto, prima della chiusura del tag head...
<style>#imPageRowGraphics_1_0, #imPageRowGraphics_1_1, #imPageRowGraphics_1_2 {background-size: 100% !important;}</style>
è riferito al tuo link, dove ci sono tre immagini, se lo devi utilizzare su altri oggetti dovrai ricavare i relativi #imPageRowGraphics_X_X...
Autore
Quindi non è previsto dal website?
Perché mai?
Ormai lo smartphone è usato almeno quanto i pc (se non di più).
Provo con codice appena possibile ed aggiornerò a breve.
Grazie.
Autore
Ciao Skeggia. Funziona a funzionare, ma inevitabilmente le immagini vengono tagliate in alcune risoluzioni.
Prova stesso tu (ho caricato il template con il tuo codice extra).
Si dovrebbe giocare con la percentuale del background size o c'è qualche codice che automaticamente riesce a riconoscere la percentuale ideale per ogni "risoluzione"?
Grazie.
Autore
Ho impostato 130% e mi pare di avere buoni risultati.
Se invece esistesse qualche codice che in automatico riuscisse a riconoscere la percentuale ideale in base alla risoluzione, allora lo cambierei.
Autore
Rettifico.
Sto facendo varie prove ma nulla che di soddisfacente.
Al 100% le immagini vengono tagliate alle risoluzioni smartphone.
Altre percentuali invece le immagini vengono ingradite troppo...
... bisogna vedere cos'è che intendi per responsive...
... le immagini nello stile delle righe sono già in modalità responsive, secondo la funzione CSS COVER (R-R | C-C | A-L), ...e per di più nell'esempio linkato è stato applicato il parallasse, che per ovvie ragioni zoomma di conseguenza; ...parallasse che sul disp. "mobile" è disattivato...!...
... invece per il rapporto (R-R), sarebbe tutto un altro discorso...
.
Autore
Buonasera, KolAsim.
Quello che cerco (definendolo responsive, che magari sarà anche errato) è proporzionare tutto (testi ed immagini di sfondo anche se impostati con effetto parallasse, che se disattivati su smartphone poco conta) anche su risoluzioni "allungate" come sono attualmente quelle degli smartphone.
Come dicevo, con l'oggetto content slider, tramite codice by Giuseppe Guida, sono riuscito ad ottenere un risultato OMOGENEO di tutto il contenitore dell'oggetto (testi e immagini).
In questo caso, sia da desktop che da mobile la resa è molto simile, riducendo le dimensioni di tutto il contenitore content slider in base alla risoluzione che si imposta. (vedi link esempio).
Invece, in questo caso, ho 2 oggetti testo e con sfondo righe.
Lasciando tutto di default, (quindi lasciando fare a website) le immagini a risoluzioni allungate (smartphone) vengono ingrandite ed i testi ricoprono quasi per intero le immagini.
Con il codice suggerito da Skeggia, lo sfondo viene sì ridimensionato, ma i margini da me impostati rimangono vuoti lasciando spazio "grigio" vuoto.
Vedi screen:
Io vorrei che le immagini siano giustamente ridotte come lo screen, ma allo stesso tempo vorrei che lo spazio grigio non si veda.
Ancora meglio poi se potessi rimpicciolire anche i testi.
Da inesperto, credo si debba intervenire anche sui margini delle celle che ho impostato per avere lo sfondo più grande, e non solo sulle immagini.
Per i testi (oggetto testo in questo caso) non so come fare.
Con il content slider l'effetto è quasi perfetto (grazie a Giuseppe Guida).
OT: Non ho capito se si possa o meno editare un messaggio in questo forum, gradirei una risposta anche a questa domanda.
ciao, ... ...... quindi si tratterebbe di R-R...
... se ti interessa e se vuoi provare il mio codice esclusivo, devi fare questi passaggi:
1) - devi sostituire o modificare le immagini non congrue con immagini congrue, o con le stesse misure; ...adesso sono in uso due rapporti differenti: 4:3, e 3:2; ...devono avere tutte lo stesso rapporto...
2) - il testo che adesso è in due celle separte, devi disporlo in una unica cella (Oggetto Testo), con un ritorno capo per due righe, e la cella distribuita a tutta larghezza;
3) - togli eventuale codice extra;
...
... avvisami quando avrai fatto così domani andrò a controllare, ... e poi ti proporrò il mio codice, che alla fin fine si ridurrà ad un semplice copia/incolla...
.
Autore
Grazie per la comprensione.
Mi interessava usare l'oggetto titolo in quanto è possibile applicare ombre/effetti al testo in maniera da renderlo simil 3D e soprattutto più leggibile anche su colore di sfondo simile al testo stesso.
Effettuerò le modifiche appena possibile, anche per vedere che effetto è possibile ottenere.
Grazie per ora.
Autore
Mi rendo conto che nei precedenti messaggi ho scritto di aver utilizzato l'oggetto testo, invece ho usato l'oggetto TITOLO come specificato nell'ultimo messaggio.
No... non si può...
solo lo STAFF ed entro certi limiti noi moderatori, possiamo apportare delle modifiche...
Autore
Buongiorno KolAsim.
Credo di aver rispettato tutte le condizioni da te richieste in questa pagina(o meglio, spero di aver capito quello che mi hai richiesto e di averlo eseguito).
Attendo conferme e magari il codice da provare.
In tutti i casi grazie ancora per il tempo dedicatomi.
... hai usato un rapporto inconsueto (55:18), e gli oggetti nella riga sono poco malleabili...
... comunque, ...prova ad incollare in /head il mio codice qui in allegato; ...i comenti li puoi anche eliminare...
.
Autore
Grazie KolAsim. Puoi darmi un parere appena puoi?
Controlla anche tu se possibile. Andrebbe bene, solo che i testi sono stati ingranditi.
Autore
Penso di aver risolto un pò a fortuna. Ho sostituito i valori di queste due righe del codice ed ora sembra essere tutto apposto (almeno in locale).
#imTextObject_8_01_tab0 .cf1 {font-size:8vw !important;} prima era a 13
#imTextObject_8_01_tab0 .cf2 {font-size:2.6vw !important;} prima era a 4.4
Cambiandoli e provandoli man mano, dopo vari tentativi ho ottenuto un risultato ragionevole.
Posso lasciarlo così?
NB: ancora non ho esportato online il sito, quindi risulta ancora col codice originale.
Lo esportero' nelle prossime ore, magari dopo un riscontro di KolAsim.
... i miei precedenti valori servivano per mantenere una certa congruità e leggibilità anche alle risoluzioni inferiori...
... eventualmente puoi provare a differenziarli con le media-query, ...per esempio:
@media (min-width: 720px) {
#imTextObject_8_01_tab0 .cf1 {font-size:8vw !important;}
#imTextObject_8_01_tab0 .cf2 {font-size:2.6vw !important;}}
@media (max-width: 719px) {
#imTextObject_8_01_tab0 .cf1 {font-size:13vw !important;}
#imTextObject_8_01_tab0 .cf2 {font-size:4.4vw !important;}}
.
... 13/4.4 ..puoi personalizzarli ad hoc ...
.
...per il resto vedo che il mio resize-ratio funziona a dovere...
... puoi usare qualsiasi rapporto, oppure direttamente le misure reali delle immagini L/A (W/H), ma rapporti interi sarebbero da preferire (1:1 - 2:1 - 3:1 - 3:2 - 4:1 - 4:3 - eccetera, eccetera...
.
Autore
Grazie davvero, farò altre prove.
Molto gentile, davvero.
Lascierò qualche feedback a breve.