CSS SYNTAXIS

📐 Usar `height` y `width` en imágenes con CSS

Las propiedades height (alto) y width (ancho) en CSS se utilizan para controlar el tamaño de los elementos, y una de sus aplicaciones más comunes es en imágenes.

📸 Etiqueta HTML básica de imagen

<img src="gatito.jpg" alt="Un gatito feliz">

Por defecto, el navegador muestra la imagen con su tamaño natural. Pero a veces queremos hacerla más pequeña o adaptarla al diseño. Para eso usamos width y height.

🧪 Ejemplo con CSS en línea

<img src="gatito.jpg" alt="Un gatito feliz" style="width: 200px; height: auto;">

¿Qué significa esto?

width: 200px → la imagen tendrá 200 píxeles de ancho
height: auto → el alto se ajusta automáticamente para mantener la proporción

🎨 Ejemplo con CSS en hoja de estilos

<img class="mini-imagen" src="gatito.jpg" alt="Un gatito feliz">

.mini-imagen {
  width: 150px;
  height: 150px;
}

Este método es útil si vas a aplicar el mismo tamaño a varias imágenes. Puedes usar clases para mantener tu código ordenado.

📌 ¿Cuándo usar `auto`?

Usar auto en una de las dos propiedades (generalmente height) es muy importante para que la imagen no se deforme. Si defines tanto el alto como el ancho de forma fija, puedes terminar estirando o aplastando la imagen.

🧠 Tip extra: usar porcentajes

.imagen-responsiva {
  width: 100%;
  height: auto;
}

Esto hace que la imagen se ajuste al ancho de su contenedor. Es perfecto para diseños responsivos, como en celulares o tablets.

✅ Resumen:

width: controla el ancho
height: controla el alto
Usa auto para mantener la proporción original
Usa 100% para que se adapte al contenedor

¡Juega con los tamaños y dale estilo a tus imágenes con CSS!