La propiedad max-width en CSS se usa para definir el ancho máximo de un elemento. El valor del ancho no puede ser mayor que el valor de max-width. Si el contenido es más grande que el ancho máximo, pasará a la siguiente línea y si el contenido es más pequeño que el ancho máximo, no tendrá ningún efecto.
Sintaxis:
max-width: none| length| initial| inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
none: es el valor predeterminado y no contiene max-width.
Sintaxis:
max-width: none;
Ejemplo: este ejemplo ilustra el uso de la propiedad max-width cuyo valor se establece en ninguno.
HTML
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: none;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p> GeeksforGeeks: A computer science portal </p>
</body>
</html>
Producción:
longitud: esta propiedad se utiliza para establecer la longitud de max-width. La longitud se puede establecer en forma de px, cm, etc.
Sintaxis:
max-width: length;
Ejemplo: Este ejemplo ilustra el uso de la propiedad max-width , para establecer la longitud de max-width.
HTML
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: 110px;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p> GeeksforGeeks: A computer science portal </p>
</body>
</html>
Producción:
porcentaje (%): esta propiedad se utiliza para establecer el ancho máximo en forma de porcentaje.
Sintaxis:
max-width: %;
Ejemplo: Este ejemplo ilustra el uso de la propiedad max-width cuyo valor se asigna en forma de porcentaje.
HTML
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: 20%;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p> GeeksforGeeks: A computer science portal </p>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado. La palabra clave inicial se puede utilizar para cualquier propiedad CSS y en cualquier elemento HTML.
Sintaxis:
max-width: initial;
Ejemplo: este ejemplo ilustra el uso de la propiedad max-width para establecer el valor en su valor predeterminado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>max-width property</title>
<!-- max-width CSS property -->
<style>
p {
max-width: initial;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p> GeeksforGeeks: A computer science portal </p>
</body>
</html>
Producción:
heredar: esta propiedad se usa para heredar una propiedad a un elemento del valor de propiedad de su elemento padre. La palabra clave de herencia se puede utilizar para heredar cualquier propiedad CSS y en cualquier elemento HTML.
Navegadores compatibles: los navegadores compatibles con la propiedad max-width se enumeran a continuación:
- Google Chrome 1.0 y superior
- Internet Explorer 7.0 y superior
- Microsoft Edge 12.0 y superior
- Firefox 1.0 y superior
- Safari 1.0 y superior
- Ópera 4.0 y superior
Publicación traducida automáticamente
Artículo escrito por EnaMotwani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA