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
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
.