CSS Ancho y Alto

Las propiedades width y height definen el ancho y alto de un elemento. Estos valores influyen en el diseño y la adaptabilidad.

Propiedades básicas

Para controlar ancho y alto se usan width, height, min-width, max-width, min-height y max-height. Permiten asignar tamaños fijos o flexibles.

Tamaños fijos y flexibles

En este ejemplo se muestra cómo asignar un tamaño fijo y cómo usar valores mínimos y máximos.

La primera caja mide 200px de ancho y 100px de alto. La segunda es flexible: al menos 150px y como máximo 300px de ancho.

Tamaños en porcentaje

El ancho también se puede definir en porcentaje, ajustándose al ancho del elemento padre.

Tamaños basados en viewport

En CSS, con las unidades de viewport (vw, vh) se ajusta el tamaño de los elementos a la anchura y altura de la pantalla. Por ejemplo, 100vw siempre ocupa todo el ancho de la ventana.

En este ejemplo, la caja ocupa todo el ancho de la pantalla y la mitad de su altura.

Diseños dinámicos y fluidos

Con las funciones min(), max() y clamp() se controla de forma más flexible el tamaño de los elementos, combinando dimensiones mínimas, máximas e ideales.

Este código crea una caja que se mantiene entre 200px y 600px de ancho, pero idealmente ocupa el 50%.

Consejos para usar width y height

Un dimensionamiento adecuado es clave en el diseño responsivo.

• Usa porcentajes o unidades de viewport para diseños adaptativos.
• Los valores min y max ayudan a evitar que los elementos se encojan o crezcan demasiado.
• Evita usar demasiados tamaños fijos, ya que pueden afectar la vista en móviles.