Nella precedente guida dedicata ai fogli di stile CSS abbiamo analizzato la proprietà height che definisce l’altezza del box di un elemento di HTML. Le proprietà min-height e max-height possono essere affiancate ad height o usate in maniera indipendente e permettono di avere una gestione più flessibile dell’altezza di un blocco.
Le proprietà min-height e max-height
Come si può facilmente intuire la proprietà min-height serve a definire l’altezza minima del box. Può essere utilizzata quando ad esempio occorre garantire che un certo elemento con dimensione proporzionale non scenda al di sotto di una certa misura che ne renderebbe scomoda o addirittura impossibile la visualizzazione. In maniera simmetrica la proprietà max-height dei CSS definisce la dimensione massima in altezza che il box dell’elemento può assumere. Anche in questo caso se pensiamo ad un elemento con dimensioni proporzionali, l’uso di max-height permette ad esempio di evitare un eccessivo ingombro del blocco.
Esattamente come height, anche le proprietà min-height e max-height possono assumere due tipologie di valori:
- valori percentuali (ad esempio 40%) intesi come frazione dell’altezza dell’elemento contenitore.
- valori assoluti espressi in una delle unità di misura valide nei CSS (px, pt, cm, in, mm, pc, em, ex) e scelta a seconda che il documento sia destinato alla visualizzazione sullo schermo o alla stampa (ad es. 25px o 30mm).
Un esempio di codice
Come accennato in un foglio di stile CSS è frequente che le proprietà min-height e max-height siano affiancate ad height. Vediamo un semplice esempio di codice costruito per il tag <img> che gestisce l’inserimento delle immagini:
img {
height: auto;
max-height: 35%; /* altezza massima */
min-height: 20px; /*altezza minima */
}