Imagen : Tamaño de la imagen con Object-fit en CSS

Fecha Publicación:       16 de Octubre de 2022
Fecha Modificación:       28 de Octubre de 2022

Object-fit  Nos permite configurar el tamaño de la imagen dentro de una etiqueta <img> y lo podemos combinar con la propiedad  object-position  

object-fit. Técnicamente esta propiedad nos permite especificar cómo se va a distribuir la altura y el ancho de un elemento con respecto a la medida del contenedor.

  .img {
    display: block;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
  }

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Referencia:

https://tailwindcss.com/docs/object-fit

https://www.bisign.es/css/object-fit/

 

Articulo : 746 - Veces Leidas
Compartir Articulo:
×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web