This translation is in progress.
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 | none |
|---|---|
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Media | visual |
| Computed value | the percentage as specified or the absolute length or none |
| Animation type | a length, percentage or calc(); |
| Canonical order | the 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
| 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.