Dimensionamento

Ci sono vari modi per dimensionare gli oggetti un una pagina HTML...

Dimensione naturale degli oggetti

Quando inseriamo un'immagine senza specificare delle dimensioni, questa viene mostrata con le sue dimensioni originali:

Dare una dimensione specifica

Usare le percentuali

 

Min-size e max-size

E' possibile stabilire che un elemento abbia come minimo una certa altezza, che può aumentare in base al contenuto:

Viewport

La viewport è l'area visibile di una pagina nel browser.

Una larghezza di 1vw è pari all'1% della larghezza dell'area visibile;

un'altezza di 1vh è pari all'1% dell'altezza dell'area visibile.

Esercizi

Crea una pagina:

dimensionamento.html

Collega la pagina a un foglio di stile:

styles.css

Crea una cartella images nella quale inserire le foto, assegnando nomi opportuni.

Nel foglio di stile crea queste classi in modo che ognuna specifichi un background-color preso dal sito https://flatuicolors.com/:

• rosso
• verde
• giallo
• blu
• arancio
• viola

Nella pagina HTML crea sei div associate alle sei classi create sopra, in modo che:

• il div giallo sia all'interno del div verde
• il div viola sia all'interno del div arancio e il div arancio sia all'interno del div blu

Inserisci nei sei div del testo a piacere.

Poi modifica le proprietà delle classi CSS in modo che:

• il div rosso sia largo come l'intero schermo, e alto 300 pixel
• il div verde sia largo metà dello schermo e alto 700 pixel
• il div giallo abbia dimensioni di 500 x 500 pixel
• il div blu sia largo come l'intero schermo e alto come l'intero schermo
• il div arancio sia largo e alto la metà del suo parent
• il div viola sia largo e alto la metà del suo parent

Applica la proprietà overflow: hidden al div giallo e overflow: scroll al div viola e prova a inserire al loro interno un'immagine mostrando cosa avviene.

 

• HTML
• CSS