Propiedad CSS max-width

La propiedad CSS max-width establece el ancho máximo que puede alcanzar un elemento. El elemento puede ser más estrecho que este valor, pero nunca crecerá más allá de él, sin importar cuánto contenido tenga o cuán grande sea su contenedor.

Esto convierte a max-width en la pieza clave de los diseños responsivos: en lugar de fijar un elemento a un ancho determinado, se permite que se contraiga libremente en pantallas pequeñas mientras se limita en pantallas grandes.

Cómo interactúa max-width con width

Es útil pensar en tres propiedades que trabajan juntas:

max-width impide que el valor utilizado de width sea mayor que el valor especificado. Si width resulta mayor que max-width, el elemento se reduce a max-width.
min-width impide que el elemento sea menor que su valor, y tiene prioridad ante cualquier conflicto — min-width anula max-width. Por tanto, si min-width es mayor que max-width, el elemento usa min-width.

En resumen, el orden de resolución es: min-width prevalece sobre max-width, y max-width prevalece sobre width.

Un patrón muy común en la práctica es una "columna de contenido centrada" que ocupa todo el ancho en viewports pequeños pero deja de ampliarse cuando ya resulta cómoda de leer:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

En un teléfono el contenedor ocupa el ancho completo; a partir de 1200px se mantiene en 1200px y los márgenes automáticos lo mantienen centrado.

Valor inicial	none
Se aplica a	Todos los elementos, excepto los elementos en línea no reemplazados, las filas de tabla y los grupos de filas.
Heredada	No.
Animable	Sí. El ancho es animable.
Versión	CSS2
Sintaxis DOM	object.style.maxWidth = "500px";

Sintaxis

Sintaxis de la propiedad CSS max-width

max-width: none | length | percentage | initial | inherit;

Un percentage se resuelve respecto al ancho del bloque contenedor del elemento. Un length (como px, em, rem, ch) es un límite fijo absoluto o relativo. El valor predeterminado, none, significa "sin máximo".

Ejemplo de la propiedad max-width:

Ejemplo de la propiedad CSS max-width con valor %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad max-width definida como "px" y "em":

Ejemplo de la propiedad CSS max-width con valores px y em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Pruébalo tú mismo »

Imágenes responsivas con max-width

Un uso clásico de max-width es hacer que las imágenes se reduzcan en pantallas pequeñas sin superar nunca su tamaño natural:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% permite que la imagen se contraiga para caber en un contenedor estrecho, mientras que height: auto mantiene su relación de aspecto intacta. Al no tener un width fijo, la imagen nunca se amplía más allá de su resolución intrínseca.

max-width vs box-sizing

De forma predeterminada (box-sizing: content-box), max-width limita únicamente el área de contenido — el relleno y el borde se suman encima, por lo que la caja visible puede resultar más ancha que max-width. Si deseas que max-width incluya el relleno y el borde, establece box-sizing: border-box:

.card {
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box; /* total rendered width never exceeds 400px */
}

Valores

Valor	Descripción
`none`	Sin ancho máximo. Este es el valor predeterminado.
`length`	Un ancho máximo fijo en `px`, `em`, `rem`, `ch`, etc. Los valores negativos no son válidos.
`%`	Un ancho máximo como porcentaje del ancho del bloque contenedor.
`initial`	Establece la propiedad en su valor predeterminado (`none`).
`inherit`	Hereda el valor del elemento padre.

Propiedades relacionadas

min-width — establece el límite inferior; anula max-width.
width — el ancho preferido, limitado por max-width.
max-height / min-height — los equivalentes verticales.

Práctica

¿Qué hace la propiedad CSS max-width?

Impide que el valor utilizado de la propiedad width sea mayor que el valor especificado por max-width.Aumenta el ancho de un elemento al valor máximoEstablece un ancho mínimo para un elementoLimita el ancho máximo de los elementos hijos dentro de un contenedor padre.Aumenta el relleno dentro de un elemento.