--- title: max-width slug: Web/CSS/max-width tags: - CSS - CSS Property - NeedsMobileBrowserCompatibility - Reference translation_of: Web/CSS/max-width ---
{{CSSRef}}

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

Sintaxi

Valors

{{cssxref("<length>")}}
L'amplada màxima, expressada com {{cssxref("<length>")}}.
{{cssxref("<percentage>")}}
L'amplada màxima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor.

Valors de paraules clau

none
L'amplada no té un valor màxim.
max-content{{experimental_inline()}}
L'amplada preferida intrínseca.
min-content{{experimental_inline()}}
L'amplada mínima intrínseca.
fill-available{{experimental_inline()}}
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{{experimental_inline()}}
El mateix que max-content.

Sintaxi formal

{{csssyntax}}

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;
}

{{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)}}

Especificacions

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.

Navegadors compatibles

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

Vegeu també