Características max-width en CSS

Características max-width en CSS

La propiedad max-width en CSS establece el ancho máximo de un elemento y evita que el valor usado de la propiedad width exceda el valor especificado en la propiedad max-width.

Funciones max-width css

Valor inicialnone
Aplicado aTodos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas.
HeredableNo
Móvil
Valor calculadoPorcentaje, longitud absoluta o palabra reservada none.
/* <length> longitudes */ 
max-width:  3.5em;
/* <porcentaje> porcentajes */ 
max-width:  75%;
/* palabras reservadas */ 
max-width:  none;
/* valores globales */ 
max-width: inherit;
max-width: initial;
max-width: unset;

La propiedad max-width tiene prioridad sobre la propiedad width, pero la propiedad min-width tiene prioridad sobre max-width.

Ejemplos y aplicaciones en código

Usaremos el siguiente ejemplo, un elemento <div> actualmente igual al 70% elemento de visualización que lo contiene, sin exceder el valor de la propiedad de visualización max-width, a saber 700px:

< div > 
Contenido en texto
</ div >

Código CSS:

div {
  width: 70%;
  max-width: 700px;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.07.07.01.0

Características generales

none

No hay un ancho máximo para este artículo.

<length>

Especifique el ancho máximo en longitudes absolutas.

<percentage>

Especifica el ancho máximo como porcentaje del ancho del elemento de bloque que contiene el elemento actual. Si la altura de ese elemento no se especifica claramente, el valor porcentual se trata como cero.

Estructura max-width css

max-width: <length> | <percentage> | none;

Consulte también

  • La página de cada una de las propiedades  widthheight que se encarga de configurar las dimensiones del elemento.
  • La página de propiedades  max-height que establece la altura mínima del elemento.
  • En la página de propiedades  min-height que establece la altura mínima del elemento.
  • La página de propiedades  min-width que establece el ancho mínimo del elemento.