Propiedad max-width
La propiedad max-width establece el ancho máximo
de un elemento. Los valores de la propiedad pueden ser
cualquiera de las unidades
de tamaño o la palabra clave none,
que indica la ausencia de valor.
Normalmente, la propiedad se establece para un elemento con ancho flexible
(el ancho se establece en porcentajes o no
se establece en absoluto, y el elemento se expande en anchura
por su contenido). Si el ancho del elemento se establece
en porcentajes, al aumentar la ventana del navegador,
éste aumentará hasta alcanzar el valor
de max-width.
Sintaxis
selector {
max-width: valor;
}
Ejemplo
En este ejemplo, el ancho es un porcentaje
del ancho del elemento padre. Aumente el ancho de la ventana del navegador,
y el contenedor también aumentará,
para adaptarse al ancho de la ventana del navegador.
Sin embargo, sólo aumentará hasta el valor
definido en max-width, que es 900px.
Una vez que el contenedor alcance este ancho,
dejará de aumentar:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
height: 300px;
border: 1px solid black;
}
:
Ejemplo
En este ejemplo, el ancho del contenedor está limitado
por ambos lados: no podrá ser mayor
de 900px ni menor de 400px:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
min-width: 400px;
height: 300px;
border: 1px solid black;
}
:
Véase también
-
la propiedad
min-width,
que establece el ancho mínimo de un elemento -
la propiedad
max-height,
que establece la altura máxima de un elemento -
la propiedad
min-height,
que establece la altura mínima de un elemento
