Proprietà CSS max-width
Usa la proprietà CSS max-width per impostare la larghezza massima dell'area contenuto di un elemento. Scopri i valori con esempi pratici.
La proprietà CSS max-width imposta la larghezza massima che un elemento può raggiungere. L'elemento può essere più stretto di questo valore, ma non crescerà mai oltre, indipendentemente da quanto contenuto abbia o da quanto diventi grande il suo contenitore.
Questo rende max-width il pilastro dei layout responsivi: invece di fissare un elemento a una larghezza specifica, lo si lascia restringere liberamente sugli schermi piccoli limitandolo su quelli grandi.
Come max-width interagisce con width
È utile pensare a tre proprietà che lavorano insieme:
max-widthimpedisce che il valore usato diwidthdiventi più grande del valore specificato. Sewidthrisolve a più dimax-width, l'elemento viene ridotto amax-width.min-widthimpedisce che l'elemento diventi più piccolo del suo valore, e vince qualsiasi conflitto —min-widthsovrascrivemax-width. Quindi semin-widthè maggiore dimax-width, l'elemento usamin-width.
In breve, l'ordine di risoluzione è: min-width batte max-width, e max-width batte width.
Un pattern comune nel mondo reale è una "colonna di contenuto centrata" che riempie i viewport stretti ma smette di allargarsi una volta raggiunta una dimensione leggibile confortevole:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}Su un telefono il contenitore occupa tutta la larghezza; oltre i 1200px rimane a 1200px e i margini auto lo mantengono centrato.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi, eccetto gli elementi inline non sostituiti, le righe di tabella e i gruppi di righe. |
| Ereditata | No. |
| Animabile | Sì. La larghezza è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.maxWidth = "500px"; |
Sintassi
Sintassi della proprietà CSS max-width
max-width: none | length | percentage | initial | inherit;Un valore percentage viene risolto rispetto alla larghezza del blocco contenitore dell'elemento. Un valore length (come px, em, rem, ch) è un limite fisso assoluto o relativo. Il valore predefinito, none, significa "nessun massimo".
Esempio della proprietà max-width:
Esempio della proprietà CSS max-width con valore %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
max-width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Max-width property example</h2>
<div>The max-width of this text is defined as 50%.</div>
</body>
</html>Risultato
Esempio della proprietà max-width definita come "px" e "em":
Esempio della proprietà CSS max-width con valori px e em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
max-width: 250px;
background-color: #8ebf42;
}
p {
max-width: 20em;
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<h2>Max-width property example</h2>
<div>The max-width of this div element is defined as 250px.</div>
<p>The max-width of this paragraph is defined as 20em.</p>
</body>
</html>Immagini responsive con max-width
Un uso classico di max-width consiste nel fare in modo che le immagini si ridimensionino sugli schermi piccoli senza mai superare le loro dimensioni naturali:
img {
max-width: 100%;
height: auto;
}max-width: 100% consente all'immagine di restringersi per adattarsi a un contenitore stretto, mentre height: auto mantiene intatto il rapporto d'aspetto. Poiché non è definita una width fissa, l'immagine non viene mai ingrandita oltre la sua risoluzione intrinseca.
max-width e box-sizing
Per impostazione predefinita (box-sizing: content-box), max-width limita solo l'area del contenuto — padding e bordo vengono aggiunti sopra, quindi la casella visibile può risultare più larga di max-width. Se si vuole che max-width includa padding e bordo, impostare box-sizing: border-box:
.card {
max-width: 400px;
padding: 20px;
box-sizing: border-box; /* total rendered width never exceeds 400px */
}Valori
| Valore | Descrizione |
|---|---|
none | Nessuna larghezza massima. Questo è il valore predefinito. |
length | Una larghezza massima fissa in px, em, rem, ch, ecc. I valori negativi non sono validi. |
% | Una larghezza massima come percentuale della larghezza del blocco contenitore. |
initial | Imposta la proprietà al suo valore predefinito (none). |
inherit | Eredita il valore dall'elemento genitore. |
Proprietà correlate
min-width— imposta il limite inferiore; sovrascrivemax-width.width— la larghezza preferita, limitata damax-width.max-height/min-height— gli equivalenti verticali.