
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 inicial | none |
---|---|
Aplicado a | Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas. |
Heredable | No |
Móvil | Sí |
Valor calculado | Porcentaje, 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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 7.0 | 7.0 | 1.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
width
,height
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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS