• R
    User •

    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!

    0
  • F
    User Attivo •

    Ma le proprietà width:100% e height:auto le applichi al contenitore oppure all'immagine? Dovresti applicarle all'immagine.

    0
  • R
    User •

    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

    0
  • H
    User Attivo •

    @Romualdo94 said:

    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.

    0
  • R
    User •

    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 🙂

    0
  • H
    User Attivo •

    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

    0
  • R
    User •

    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.

    0
  • R
    User •

    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

    0
  • H
    User Attivo •

    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

    
<div class="img-height">
  <img class="full-width-img" alt="" src="image.jpg" />
</div>


    
.full-width-img {
  width: 100%;
}
.img-height {
  height:100%;
}

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

    0
Effettua l'accesso per rispondere