Cambiar el tamaño de una imagen para que se ajuste a la ventana del navegador sin distorsión

Cambiar el tamaño de una imagen para que se ajuste a la ventana del navegador es una tarea común con soluciones aparentemente simples. Sin embargo, cumplir con requisitos específicos, como preservar proporciones y evitar recortar, puede presentar desafíos.

Solución sin barras de desplazamiento ni Javascript (solo CSS)

Esta solución utiliza CSS Grid para garantizar que el contenedor de imágenes ocupe toda la altura de la ventana. Luego, la imagen se configura para que quepa horizontal y verticalmente dentro de ese contenedor, preservando su relación de aspecto y evitando la adición de barras de desplazamiento.

Solución con JQuery

Si Javascript está disponible , otro enfoque es:

Aquí, la altura del cuerpo se establece para que coincida con la altura de la ventana, lo que garantiza que la propiedad de altura máxima en la imagen funcione correctamente. El evento de cambio de tamaño de la ventana también se maneja para ajustar automáticamente la altura del cuerpo y el tamaño de la imagen cuando se cambia el tamaño de la ventana.