| Definición | Limita la anchura máxima de los elementos de bloque |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra | |
| Valor inicial | none |
| Se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla. |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/visudet.html#propdef-max-width |
Ejemplos de uso
En ocasiones, puede ser útil no establecer de forma explícita la anchura de los elementos pero sí fijar una anchura máxima. En el siguiente ejemplo, el primer <div> no tiene establecida la propiedad max-width por lo que su anchura ocupa todo el espacio disponible en el elemento que lo contiene.
Sin embargo, el segundo <div> tiene establecida una anchura máxima mediante max-width: 400px. Si se reduce el tamaño de la ventana del navegador, los dos <div> reducen su tamaño para adaptarse al nuevo sitio disponible. Sin embargo, al aumentar el tamaño de la ventana del navegador, el primer <div> ocupa todo el sitio disponible y el segundo <div> no crece más allá de los 400px establecidos.
La propiedad max-width no admite valores negativos, los valores en porcentaje toman como referencia la anchura del elemento contenedor y el valor none se puede utilizar para no limitar la anchura máxima de un elemento.
Uno de los usos típicos de max-width es el de limitar la anchura máxima de las páginas web. Con el uso de pantallas y resoluciones cada vez mayores, se complica la creación de páginas web cuya anchura se adapta dinámicamente. El siguiente ejemplo establece la anchura de la página al 95% del tamaño de la ventana del navegador:
#contenedor {
width: 95%;
}<body>
<div id="contenedor">
...
</div>
</body>Si se visualiza la página anterior en una pantalla con una resolución muy grande, seguramente su aspecto será demasiado diferente al diseño original de la página. En estos casos, se suele mantener la anchura adaptable a la ventana del navegador, pero se limita su anchura máxima:
#contenedor {
width: 95%;
max-width: 1200px;
}<body>
<div id="contenedor">
...
</div>
</body>El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso de CSS y JavaScript para simular el comportamiento de la propiedad max-width:
#contenedor {
max-width: 1200px;
width: expression(document.body.clientWidth > 1201? "1200px": "auto");
}El ejemplo anterior hace uso de una función llamada expression() que sólo funciona en los navegadores de tipo Internet Explorer (desde su versión 5). Esta función permite establecer una medida utilizando expresiones matemáticas o mediante código JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinámica la anchura del elemento #contenedor. Si la anchura de la página (obtenida mediante document.body.clientWidth) es mayor que 1201px, se establece su anchura a 1200px. En cualquier otro caso, se deja que el navegador calcule automáticamente la anchura necesaria mediante el valor auto.
El principal inconveniente de utilizar la función expression() es que el código CSS resultante no es válido según el estándar oficial y por tanto, no supera satisfatoriamente el proceso de validación de herramientas como el validador de CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemáticas puede resultar muy útil para tener un control preciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versión CSS 3 incluirá una función llamada calc() cuyo funcionamiento es idéntico a expression().
El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operación matemática compleja:
#contenedor {
float: left;
border: 1px solid;
margin: 1em;
width: calc(100%/3 - 2*1em - 2*1px);
}La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) y después se le resta el sitio que ocupan los dos márgenes laterales de 1em de anchura cada uno (2*1em) y el espacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).