0

amigos, estoy implementando un carrusel de imagenes para que haga las veces de banner en una pagina web. El problema esta en que al establecerle un alto especifico a la imagen, las personas se ven enanas. Quiero establecer un alto especifico para que tome la altura del div con max-height:100vh;

 <img
        src={item.itemImageSrc}
        alt={item.alt}
        style={{ width: "100%", display: "block", maxHeight:"100vh"}}
      />

si no le especifico una altura desborda al contenedor.

¿ como establezco una altura a la imagen sin afectar el aspecto de la misma?

1

1 respuesta 1

0

Para establecer una altura específica a una imagen sin afectar su aspecto, puedes utilizar la propiedad de CSS object-fit. Esta propiedad te permite controlar cómo se ajusta un elemento de contenido dentro de su contenedor.

Por ejemplo, si quieres establecer una altura específica para una imagen y mantener su aspecto original, puedes utilizar la siguiente propiedad:

style={{ width: "100%", display: "block", maxHeight:"100vh", objectFit: "cover"}}

Esto establecerá la altura máxima de la imagen en 100% de la altura de la ventana del navegador, y utilizará la propiedad object-fit: cover para ajustar la imagen al contenedor manteniendo su aspecto original.

También puedes utilizar la propiedad object-fit: contain para ajustar la imagen al contenedor de manera que se muestre completa dentro del contenedor, pero puede que se distorsione su aspecto si la imagen tiene una proporción diferente al contenedor.

En resumen, para establecer una altura específica a una imagen sin afectar su aspecto, puedes utilizar la propiedad object-fit en CSS. Esta propiedad te permite controlar cómo se ajusta el contenido dentro de su contenedor y mantener su aspecto original.

2
  • Lectura recomendada: es.meta.stackoverflow.com/questions/5450/…
    – Alfabravo
    el 7 dic. 2022 a las 3:26
  • Caramba amigo, crei que no iba a funcionar porque habia intentado con la propiedad objectFit, Pero me funciono perfecto asi como colocas en la respuesta. No entiendo el -1 en este foro les gusta mucho desvalorizar las respuesta. Te di un voto a favor para quitartelo jjj. el 7 dic. 2022 a las 16:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.