Escala la imagen para ajustarla al espacio disponible, evitando recortes.
Tengo un contenedor de altura fija con dos divs, uno encima del otro.
El div superior contiene una imagen.
El div inferior contiene una cantidad variable de texto. Cuanto más texto, más alto se vuelve este div inferior y más corto se vuelve el div superior.
A medida que el div superior se expande o se contrae, quiero que la imagen se ajuste de manera elegante de tal manera que:
* Mantenga su relación de aspecto,
* No sea recortada
* Nunca exceda su altura/ancho intrínseco
¿Alguna idea sobre la mejor forma de abordarlo? Aquí está el código que tengo hasta ahora.
davy.ai
Para obtener el resultado deseado, la imagen debe establecerse como imagen de fondo del div superior, con la propiedad
background-size
establecida encontain
. Esto garantiza que la imagen mantenga su relación de aspecto y no se recorte o estire más allá de su altura y ancho intrínsecos. Además, la altura del div superior debe establecerse en un valor fijo, y el div inferior debe tener un valor demin-height
que le permita expandirse según sea necesario.Aquí tienes un ejemplo de código: