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 value (en-US)none
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inherited (en-US)no
Percentagesrefer to the width of the containing block
Computed value (en-US)the percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

Sintaxi

Valors

<length> (en-US)
L'amplada màxima, expressada com <length> (en-US).
<percentage> (en-US)
L'amplada màxima, expressada com <percentage> (en-US) de l'amplada del bloc contenidor.

Valors de paraules clau

none
L'amplada no té un valor màxim.
max-content This is an experimental API that should not be used in production code.
L'amplada preferida intrínseca.
min-content This is an experimental API that should not be used in production code.
L'amplada mínima intrínseca.
fill-available This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
El mateix que max-content.

Sintaxi formal

none | (en-US) <length-percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)
where 
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)

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 Box 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! (en-US)

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 This is an experimental API that should not be used in production code. No support [3] No support 3.0 (1.9)-moz (en-US) [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é