Back to top

Autore Topic: Immagini non Responsive  (Letto 1668 volte)

Offline gaga76

  • Appassionato
  • ***
  • Post: 226
    • Mostra profilo
Immagini non Responsive
« il: 21 Set 2017, 15:37:02 »
Buonasera a tutti, ultimato un sito, mi rendo conto che visualizzandolo da smartphone tutte le immagini vengono troncate e non adattate come dovrebbero essere per rispettare appunto il responsive.
Unico input dei produttori, quello di inserire una stringa di testo nell'override per - sistemare -
Ovviamente non si sistema quasi niente.  :-X :-X :-X :-X

Come posso risolvere?
« Ultima modifica: 25 Set 2017, 08:38:12 da gaga76 »

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 6314
  • Sesso: Maschio
    • Mostra profilo
Re:Immagini non Responsive
« Risposta #1 il: 21 Set 2017, 15:41:49 »
Il link che hai inserito non è corretto

Offline gaga76

  • Appassionato
  • ***
  • Post: 226
    • Mostra profilo
Re:Immagini non Responsive
« Risposta #2 il: 21 Set 2017, 15:51:16 »
il link è giusto, ma credo sia una impostazione del forum che... va così.
se ci passi sopra col mouse, lo si vede...

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Re:Immagini non Responsive
« Risposta #3 il: 21 Set 2017, 23:47:02 »
visualizzandolo da smartphone tutte le immagini vengono troncate e non adattate come dovrebbero essere per rispettare appunto il responsive.

Ho dato un'occhiata al tuo bel sito e, in realtà, le immagini non è che vengano "troncate", ma piuttosto subiscono un effetto di "zoom" quando diminuisce la risoluzione del display sulle quali vengono visualizzate.
Sbirciando il sorgente della home page del sito si capisce che l'immagine utilizzata è sempre la stessa, ma, al diminuire della risoluzione la slide effettua una specie di "crop", inquadrando una porzione ristretta dell'immagine.
Non è la prima volta che vedo questa tipologia di slide e, a mio parere, ha un senso.
Cerco di chiarire: le immagini che utilizzi nella slide della home page hanno una risoluzione di 1770x866px (Aspect Ratio: 1,96); in una visualizzazione responsive "standard" (quella che ti aspettavi tu e che è quella che si vede nella stragrande maggioranza dei casi) scalerebbero mantenendo le proporzioni, ma questo, soprattutto a basse risoluzioni, porterebbe a immagini "poco leggibili".
Nei due allegati vedi cosa accade all'immagine (mantenendo l'aspect ratio originale) portata a 360px di larghezza (immagine 1), e cosa invece succede nella slide che hai utilizzato (immagine 2). Nel secondo caso si sposta il "focus" dell'immagine che perde sì la sua "ampiezza", ma guadagna in "leggibilità", e molto a parer mio.
Ti rendi conto molto bene di ciò se restringi e allarghi con continuità la finestra del browser, o se giochi un po' con le "modalità di visualizzazione flessibile" del browser.

Quello che scrivo non è, naturalmente, solo il mio pensiero, ma è anche una delle nuove tendenze nell'uso delle immagini responsive che si chiama "Art Direction".
A me piace molto e la trovo molto efficace. Si tratta anche di scegliere delle immagini "giuste" che mantengano un senso quando subiscono questo effetto di "pseudo-crop". Le foto della tua slide reggono bene, tranne una, quella nottturna col cielo stellato, la quale, sotto una certa risoluzione non mostra più la coppia di sposi sulla destra che invece dovrebbe essere il "focus" dell'immagine.

Come puoi risolvere? Se proprio non ti piace l'effetto della tua slide, cercane un'altra più "standard" nella visualizzazione delle immagini... A me piace molto!  ;)
« Ultima modifica: 22 Set 2017, 08:57:17 da Limma »

Offline gaga76

  • Appassionato
  • ***
  • Post: 226
    • Mostra profilo
Re:Immagini non Responsive
« Risposta #4 il: 22 Set 2017, 08:49:37 »
Grazie per la disamina graditissima.
Sarei d'accordo in toto, se non fosse che il cliente vuole assolutamente far vedere le foto (quasi) per intero. Pena, divorzi repentini visto che in alcuni scatti lo zoom evita uno dei due sposi. :-[

Leggendo sul forum del produttore, indicano di inserire una regola
Citazione
.gkIsWrapper-gk_photo .gkIsSlide {
    background-size: 100% auto !important;
}ma non cambia praticamente nulla. E devo risolvere per forza.

 



Web Design Bolzano Kreatif