En esta sección vamos a aprender cómo usar las propiedades CSS width, height, min-width, max-height y min-height para controlar el tamaño de los elementos en una página web.
10. Propiedades width, height, max-width, min-width, max-height y min-height
Veamos una tabla resumen de las propiedades que vamos a tratar en esta sección:
| Nombre propiedad | Descripción | Valores |
|---|---|---|
| width | Establece el ancho del área de contenido de un elemento | Unidad de longitud (px, em, %, etc.), auto, initial, inherit |
| height | Establece el alto del área de contenido de un elemento | Unidad de longitud (px, em, %, etc.), auto, initial, inherit |
| max-width | Establece el ancho máximo que puede tener un elemento | Unidad de longitud (px, em, %, etc.), none, initial, inherit |
| min-width | Establece el ancho mínimo que debe tener un elemento | Unidad de longitud (px, em, %, etc.), 0, initial, inherit |
| max-heigt | Establecer el alto máximo que debe tener un elemento | Unidad de longitud (px, em, %, etc.), 0, initial, inherit |
| min-height | Establecer el alto mínimo que debe tener un elemento | Unidad de longitud (px, em, %, etc.), 0, initial, inherit |
10.1. ¿Qué son las propiedades CSS width y height?
Las propiedades CSS width y height se usan para establecer el ancho y el alto de un elemento. Por defecto, estas propiedades se refieren al área de contenido del elemento, es decir, el espacio que ocupa el texto, las imágenes u otros elementos dentro del elemento. El área de contenido no incluye el padding (relleno), el border (borde) ni el margin (margen) del elemento.
Sin embargo, podemos cambiar este comportamiento con la propiedad CSS box-sizing, que nos permite definir qué partes del elemento se incluyen en el cálculo del ancho y el alto. Esto lo veremos en la siguiente sección del tutorial.
10.2. Cómo usar las propiedades CSS width y height
Veamos algunos ejemplos de uso de width y height con diferentes unidades:
- Para darle un ancho y un alto fijo a un elemento, podemos usar píxeles como unidad. Por ejemplo, si queremos que un elemento tenga un ancho de 200px y un alto de 100px, podemos usar este código:
div {
width: 200px;
height: 100px;
}
- Para darle un ancho y un alto relativo al elemento contenedor, podemos usar porcentajes como unidad. Por ejemplo, si queremos que un elemento ocupe el 50% del ancho y el 25% del alto del elemento padre, podemos usar este código:
div {
width: 50%;
height: 25%;
}
10.3. ¿Qué son las propiedades CSS max-width y max-height?
Las propiedades CSS max-width y max-height se usan para establecer el ancho y el alto máximo de un elemento. Estas propiedades nos permiten limitar el tamaño de un elemento para que no supere cierto valor, incluso si le damos un ancho o un alto mayor con las propiedades width o height.
Esto puede ser muy útil para crear diseños responsivos que se adapten a diferentes tamaños de pantalla. Por ejemplo, podemos usar max-width para evitar que una imagen se salga del contenedor o que se distorsione al cambiar la resolución. También podemos usar max-height para controlar la altura de un elemento que tenga contenido variable, como un menú desplegable o una caja de texto.
10.4. ¿Qué son las propiedades CSS min-width y min-height?
Las propiedades CSS min-width y min-height se utilizan para establecer la anchura y la altura mínima de un elemento, respectivamente. Estas propiedades impiden que el elemento se reduzca a un ancho o alto menor que el valor especificado.
Las propiedades min-width y min-height se pueden utilizar para garantizar que un elemento tenga un tamaño mínimo, independientemente del tamaño del contenido que contenga. Por ejemplo, se pueden utilizar para garantizar que un elemento siempre tenga un tamaño mínimo de visualización, incluso en pantallas pequeñas.
10.5. Cómo usar las propiedades CSS max-width, min-width, max-height y min-height
Veamos algunos ejemplos de uso de max-width, min-width, max-height y min-height con diferentes unidades:
- Para darle un ancho y un alto máximo a un elemento en píxeles, podemos usar esta unidad como valor. Por ejemplo, si queremos que una imagen no supere los 300px de ancho ni los 200px de alto, podemos usar este código:
img {
max-width: 300px;
max-height: 200px;
}
- Para darle un ancho y un alto máximo a un elemento en porcentajes, podemos usar esta unidad como valor. Por ejemplo, si queremos que una imagen no ocupe más del 50% del ancho ni del 25% del alto del elemento contenedor, podemos usar este código:
img {
max-width: 50%;
max-height: 25%;
}
El siguiente código establece el ancho máximo del elemento div a 300 píxeles:
div {
max-width: 300px;
}
El siguiente código establece el alto mínimo del elemento div a 100 píxeles:
CSS
div {
min-height: 100px;
}
Ejemplo práctico en CodePen
Veamos un ejemplo práctico: Para crear un contenido a pantalla completa que no se haga más grande al llegar a un ancho máximo, puedes usar la propiedad max-width junto con la propiedad width. Así, le das al elemento un ancho relativo al tamaño de la pantalla, pero también le pones un límite absoluto.
Por ejemplo, si quieres que el contenido ocupe el 95% del ancho de la pantalla, pero que no supere los 1200px, puedes usar este código:
.content {
width: 95%; /* El contenido ocupa el 95% del ancho de la pantalla */
max-width: 1200px; /* El contenido no ocupará más de 1200px */
margin: 0 auto; /* Centrar el contenido */
}
De esta forma, el contenido se adaptará al tamaño de la pantalla, pero no se hará más grande de lo necesario. Esto puede mejorar la legibilidad y el diseño de tu página web.
Test