+ Rispondi alla Discussione
Risultati da 1 a 9 di 9

Info per immagine full width

Ultimo Messaggio di hub il:
  1. #1
    User
    Data Registrazione
    Feb 2019
    Località
    Milano
    Messaggi
    22

    Info per immagine full width

    Ciao a tutti, ho aggiunto in svariate pagine del sito un header immagine full width con width:100% ed height: auto ed ho utilizzato un immagine di 1920x545 pixel. Ora nel pc è tutto ok però da mobile l'header risulta essere molto schiacciato. Cosa devo cambiare per avere un immagine di header più proporzionata? Quali sono le misure ottimali dell'immagine da utilizzare come header full width? Il risultato che voglio ottenere è che da mobile l'immagine sia visibile nell'interezza perchè ho provato anche con background cover ma l'immagine viene tagliata. Grazie!

  2. #2
    User
    Data Registrazione
    Nov 2018
    Località
    Ragusa
    Messaggi
    112
    Aggiungi flaviors200 su Google+ Aggiungi flaviors200 su Facebook Aggiungi flaviors200 su Linkedin
    Ma le proprietà width:100% e height:auto le applichi al contenitore oppure all'immagine? Dovresti applicarle all'immagine.
    Sviluppo siti web per aziende e professionisti

  3. #3
    User
    Data Registrazione
    Feb 2019
    Località
    Milano
    Messaggi
    22
    Ciao, la applico all'immagine e infatti su pc l'immagine è full width, il problema è che con i cellulari essendo eight auto si riproporziona e l'immagine è un po schiacciata, volevo capire se qualcuno ha qualche consiglio su come fare o su quali misure utilizzare per le foto. Grazie
    Ultima modifica di Romualdo94; 16-04-19 alle 16:51

  4. #4
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    624
    Citazione Originariamente Scritto da Romualdo94 Visualizza Messaggio
    volevo capire se qualcuno ha qualche consiglio su come fare o su quali misure utilizzare per le foto. Grazie
    Ciao, sono talmente tante le soluzioni che è quasi impossibile darti un'idea senza vedere il codice.
    Posta il link al sito, o almeno tutto il codice che gestisce l'immagine, ma il sito sarebbe meglio.

  5. #5
    User
    Data Registrazione
    Feb 2019
    Località
    Milano
    Messaggi
    22
    Ciao scusa una domanda ma tu che formato utilizzi per le immagini full width? Perchè non vorrei che sia dovuto al formato 1920x545 perchè ho letto che alcuni consigliano di utilizzare 1200x600. Vorrei prima di tutto capire che formato dovrei utilizzare? grazie

  6. #6
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    624
    Non è importante, sia che usi una visualizzazione full width o anche full screen, al massimo ridimensionando il browser ti taglia via un pezzo. Quello che conta è non avere quell'effetto "strech" che deforma l'immagine, come nel tuo caso su mobile, quindi sempre un rapporto 1:1

  7. #7
    User
    Data Registrazione
    Feb 2019
    Località
    Milano
    Messaggi
    22
    Ciao scusa ma quindi cosa dovrei fare per evitare l'effetto stretch? l'immagine non è in un div e il codice per img è width: 100% ed height:auto, non ci sono applicate altre regole e l'immagine è 1920x545.

  8. #8
    User
    Data Registrazione
    Feb 2019
    Località
    Milano
    Messaggi
    22
    Ciao volevo precisare che l'effetto che non voglio ottenere non è "strech" in quanto il problema delle immagini è che su mobile risultano essere più schiacciate! Ho fatto svariati tentativi ma non ho ottenuto risultati, voi come gestite le immagini header full screen? utilizzate diversi formati della stessa immagine e le gestite con le media query? grazie

  9. #9
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    624
    Come ti ho già scritto sopra se non posti il link alla pagina sarà un po' dura.
    Prova la soluzione più semplice ma non è detto che funziona, tutto dipende da com'è strutturata la pagina e i CSS

    Codice:
    <div class="img-height">
      <img class="full-width-img" alt="" src="image.jpg" />
    </div>
    Codice:
    .full-width-img {
      width: 100%;
    }
    .img-height {
      height:100%;
    }

    Questa è la base minima per visualizzare con rapporto 1:1

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.