Home page con image full screen e cornice

[Valeria75_bis]

Ciao a tutti, partendo da un'immagine vorrei fare in modo che sia sempre full-screen.
Intendo che ridimensionando la finestra, vorrei che l'immagine sia sempre visualizzata completamente.... come accade in molti siti recenti che presentano foto full-screen.

Ultima cosa, intorno all'immagine full-screen avrei bisogno di una cornice nera di 10px.
Quindi un rettangolo nero intorno alla pagina e all'interno immagine full-screen.

Mi potete aiutare?

Thanks

[Valeria75_bis]

Nothing??

[Mich_]

Le cose cambiano se l'immagine e` uno sfondo o e` inserita tramite <img>.

Nel primo caso si puo` farlo con gli attributi CSS3:
background-size: cover;
(non funziona in qualche browser vecchio)

Invece per l'<img>, devi definire una o ambedue le dimensioni al 100%; in tal caso il contenitore deve avere dimensioni definite (se sono in % la cosa e` ricorsiva, fino agli oggetti body e html).


Per il bordo nero, la cosa piu` semplice e` avere il bordo inserito nell'immagine stessa, la qual cosa ti evita vari problemi; pero` il bordo potrebbe non essere uguale tra i lati orizzontali e verticali.
Altrimenti occorre lavorare con i bordi, ma allora il 100% non e` piu` valido, ed occorrono strutture supplementari (un blocco che contiene i bordi ed uno interno che contiene l'immagine con padding opportuno nel blocco esterno).

[Valeria75_bis]

L'immagine potrei farla in entrambi i modi...

l'unico dettaglio è che avrei bisogno di un test/link:
- o carattere sull'immagine
- o area dell'immagine mappata

quale sarebbe la soluzione migliore per ottenere questo risultato?

Grazie!

[Mich_]

Non ho capito cosa vuoi.

Comunque la scelta tra sfondo e <img> e` data dalla semantica.
Uno sfondo e` un oggetto di abbellimento e non porta informazioni, una <img> e` un oggetto semantico (porta informazioni).

[Valeria75_bis]

Ipotizzando di usare una immagine, come posso renderla full-screen (sempre) ed avere la cornice intorno?

Grazie

[Valeria75_bis]

Mi basta la soluzione più semplice.

Ad esempio, ipotizzando di usare una immagine come sfondo, come posso renderla full-screen (sempre) ed avere la cornice intorno?

Grazie

[Mich_]

Ho gia` risposto:

... si puo` farlo con gli attributi CSS3:
background-size: cover;
(non funziona in qualche browser vecchio)
...

Per il bordo nero, la cosa piu` semplice e` avere il bordo inserito nell'immagine stessa, la qual cosa ti evita vari problemi; pero` il bordo potrebbe non essere uguale tra i lati orizzontali e verticali.
...

[Valeria75_bis]

Perfetto!!!

Quindi mettendo: background-size: cover;

come posso inserire un testo che sia sempre nella parte inferiore delle screen e centrato orizzontalmente?


Ultimo dubbio: che dimensioni mi suggerisci per l'immagine?? Intendo per renderla visibile "correttamente" sulla maggior parte dei browsers?

Grazie infinite!!!

[deleted_129]

Il difetto di mettere una foto grande è appesantire il sito, ma se vuoi una foto che si veda bene in tutte le risoluzioni devi metterla grande. Caricherà lento comunque.