Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    impostare altezza per visualizzare tutta l'immagine di background

    Ciao a tutti, stavo iniziando a smanettare un po con la guida "pagina singola con effetto parallax".

    Nell'esempio è impostato background-size: cover per adattare la larghezza dell'immagine alla finestra, il valore dell'altezza della prima sezione è impostato su "100%" (per impostare l'altezza della sezione pari all'altezza attuale della finestra del browser), in questo modo l'immagine viene tagliata e la parte inferiore non viene visualizzata

    codice HTML:
    #slide1 {    height: 100%;	background-image:url('../images/1.jpg');	background-color:#fff;	background-repeat: no-repeat;	background-size: cover;	background-attachment: fixed;}
    Se volessi permettere la visualizzazione dell'intera immagine come devo fare?
    Vorrei che scorrendo la pagina venga visualizzata tutta l'immagine per poi passare alla slide2.

  2. #2
    l'esempio a cui ti riferisci è questo (certo potevi anche linkalo ) ?
    "background-size: cover" adatta l'immagine al suo contenitore per il suo lato più corto, facendo sì che quello più lungo venga tagliato fuori, mentre "contain" adatta il lato lungo, lasciando però un eventuale avanzo (qui esempi della proprietà).
    in questo modo l'immagine viene tagliata e la parte inferiore non viene visualizzata
    Questo dipende dalla risoluzione dello schermo, perchè di base è la larghezza ad essere tagliata per prima.
    Ultima modifica di VinzClortho; 16-05-2016 a 04:45

  3. #3
    Grazie per la risposta.
    Avevo provato con "contain", ma non riuscivo a centrare l'immagine.
    Ho impostato high=100vw e l'immagine viene visualizzata completamente (se l'immagine è più alta, basta impostare un valore piu alto di 100)!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.