--- title: max-width slug: Web/CSS/max-width tags: - CSS - CSS Property - NeedsMobileBrowserCompatibility - Reference translation_of: Web/CSS/max-width ---
La propietat CSS max-width
estableix l'amplada màxima d'un element . Impedeix que el valor utilitzat per la propietat {{ Cssxref("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;
{{ Cssxref("max-width") }} anul·la {{cssxref("width")}}, però {{ Cssxref("min-width") }} anul·la {{ Cssxref("max-width") }}.
{{cssinfo}}
none
max-content
{{experimental_inline()}}min-content
{{experimental_inline()}}fill-available
{{experimental_inline()}}available
.)fit-content
{{experimental_inline()}}max-content.
{{csssyntax}}
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; }
{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}
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; }
{{EmbedLiveSample("fit-content-demo", 400, 100)}}
Especificació | Estat | Comentari |
---|---|---|
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }} | {{ Spec2('CSS3 Sizing') }} | 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ó). |
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }} | {{ Spec2('CSS3 Transitions') }} | Defineix max-width com animable. |
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }} | {{ Spec2('CSS2.1') }} | Definició inicial. |
{{ CompatibilityTable() }}
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("1.0")}} | 7.0 | 4.0 | 2.0.2 (416), buggy before |
s'aplica a <table> [1] |
{{ CompatNo() }} | {{CompatNo}} | {{CompatVersionUnknown()}} | {{ CompatNo() }} | {{CompatVersionUnknown()}} | {{ CompatNo() }} |
max-content , min-content , fit-content i fill- available {{ experimental_inline() }} |
{{ CompatNo() }} [3] | {{CompatNo}} | {{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2] | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} [3] |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | {{ CompatUnknown() }} | {{CompatVersionUnknown}} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
[1] CSS 2.1 deixa explícitament indefinit el comportament de max-width
amb {{ HTMLElement("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
.