max-width

La propietat CSS max-width estableix l'amplada màxima d'un element . Impedeix que el valor utilitzat per la propietat width sigui més gran que el valor especificat per max-width.

/* <length> value */
max-width: 3.5em;

/* <percentage> value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

max-width anul·la width, però min-width anul·la max-width.

Initial valuenone
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length or none
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxi

Valors

<length>
L'amplada màxima, expressada com <length>.
<percentage>
L'amplada màxima, expressada com <percentage> de l'amplada del bloc contenidor.

Valors de paraules clau

none
L'amplada no té un valor màxim.
max-content
L'amplada preferida intrínseca.
min-content
L'amplada mínima intrínseca.
fill-available
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau , available.)
fit-content
El mateix que max-content.

Sintaxi formal

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

Exemples

En aquest exemple, el "fill" tindrà 150 píxels d'amplada o l'amplada del "pare", el que sigui més petit:

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

El valor fit-content es pot utilitzar per establir l'amplada d'un element en funció de la grandària intrínseca que requereix el seu contingut:

#parent {
  background: lightblue;
  width: 300px;
}

#child  {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}

Especificacions

Especificació Estat Comentari
CSS Intrinsic & Extrinsic Sizing Module Level 3
The definition of 'max-width' in that specification.		 Working Draft Afegeix les paraules clau max-content, min-content, fit-content i fill-available. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
CSS Transitions
The definition of 'max-width' in that specification.		 Working Draft Defineix max-width com animable.
CSS Level 2 (Revision 1)
The definition of 'max-width' in that specification.		 Recommendation Definició inicial.

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 7.0 4.0 2.0.2 (416),
buggy before
s'aplica a <table>[1] No support No support (Yes) No support (Yes) No support
max-content, min-content, fit-content i fill-available No support [3] No support 3.0 (1.9)-moz [2] No support No support No support [3]
Descripció Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? (Yes) ? ? ? ?

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-width amb <table>. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing .

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content No hi ha equivalent per fill-available o fit-content.

Vegeu també