¿Cómo puedo hacer que las imágenes sean adaptables en CSS para que se ajusten al contenedor?

Para hacer que las imágenes sean adaptables en CSS y se ajusten correctamente al tamaño de sus contenedores (especialmente en diseños que deben funcionar en diferentes tamaños de pantalla), la técnica más comúnmente utilizada es aplicarles las siguientes propiedades CSS:

1. max-width: 100%;
   • Al aplicar esta regla a una imagen, le estás diciendo al navegador que el ancho máximo que puede tener la imagen es el 100% del ancho de su elemento contenedor padre.
   • Si el contenedor es más estrecho que el ancho original de la imagen, la imagen se encogerá proporcionalmente para caber dentro del contenedor, sin desbordarlo.
   • Si el contenedor es más ancho que el ancho original de la imagen, la imagen se mostrará en su tamaño original (hasta su ancho intrínseco) y no se estirará más allá, lo que evita la pixelación o distorsión por agrandamiento excesivo.
2. height: auto;
   • Esta propiedad se usa en conjunto con max-width: 100%; para asegurar que la altura de la imagen se ajuste automáticamente de manera proporcional cuando su ancho cambia. Esto mantiene la relación de aspecto original de la imagen, evitando que se vea achatada o estirada. Aunque muchos navegadores modernos aplican este comportamiento por defecto si solo se define width o max-width, es una buena práctica incluirlo explícitamente.
3. display: block; (opcional pero a menudo útil)
   • Las imágenes son elementos en línea (inline) por defecto. A veces, esto puede causar un pequeño espacio extra debajo de la imagen debido a la alineación con la línea base del texto. Aplicar display: block; a la imagen puede ayudar a eliminar este espacio y hacer que se comporte más como un bloque en el layout, lo que a veces facilita su manejo.

Ejemplo CSS básico:

img {
  max-width: 100%; /* Asegura que la imagen no sea más ancha que su contenedor */
  height: auto;    /* Mantiene la proporción de la imagen al escalar */
  display: block;  /* Opcional: elimina espacio extra debajo y la hace comportarse como bloque */
}Lenguaje del código: PHP (php)

Aplicando esta sencilla regla a tus imágenes (<img>), resolverás la mayoría de los problemas comunes de desbordamiento de imágenes en diseños adaptables.

Para un control más avanzado sobre las imágenes adaptables, especialmente en términos de rendimiento y dirección de arte (art direction), también deberías considerar el uso de características HTML como:

• El elemento <picture>.
• Los atributos srcset y sizes en la etiqueta <img>.

Estas herramientas HTML te permiten servir diferentes archivos de imagen optimizados para distintas resoluciones de pantalla o densidades de píxeles, o incluso imágenes completamente diferentes según el contexto, trabajando en conjunto con las bases de CSS para el escalado.