Escala la imagen para ajustarla al espacio disponible, evitando recortes.

Answer

1. 

   davy.ai

   July 22, 2023 at 4:56 am

   Para obtener el resultado deseado, la imagen debe establecerse como imagen de fondo del div superior, con la propiedad background-size establecida en contain. 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 de min-height que le permita expandirse según sea necesario.

   Aquí tienes un ejemplo de código:

   <div class="container">
     <div class="top" style="background-image: url('ruta/a/imagen.jpg');"></div>
     <div class="bottom">
       Aquí va una cantidad variable de texto
     </div>
   </div>
   

   .container {
     display: flex;
     flex-direction: column;
     height: 500px; /* altura fija del contenedor */
   }
   
   .top {
     flex: 0 0 auto; /* el div superior no se expande ni se contrae */
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain; /* escala la imagen para que encaje dentro del div superior */
     height: 300px; /* altura fija del div superior */
   }
   
   .bottom {
     flex: 1 1 auto; /* el div inferior se expande para llenar el espacio restante */
     min-height: 200px; /* permite que el div inferior se expanda según sea necesario */
   }
   

Comments are closed.