Proyectos Web

Uso de la propiedad object fit - CSS

03 de Febrero de 2018

¿Has tenido problemas al crear una galería en la cual las imágenes son de diversos tamaños? A veces sucede que en una galería hay imágenes de resoluciones totalmente distintas, algunas verticales, otras horizontales.

Podemos recurrir a editar las imágenes pero eso ocasiona la perdida de la misma. También podríamos dalrle un ancho y alto específico a la imagen desde css con width y height pero eso deforma la imagen.

La solución para eso es usar la propiedad Object Fit. Esta propiedad nos salva en este tipo de situaciones debido a que permite especificar como se comportará el contenido de un elemento.

Los valores para esta propiedad son:

  • Object-fit: fill: El contenido rellena todo el elemento. De acuerdo a las dimensiones del mismo. Esto oacasiona que la imagen se distorsione y se pierda el aspecto de la imagen.
  • Object-fit: contain: La imagen encaja lo mejor posible en el contenedor, aquí no se pierde el aspecto de la imagen, pero no se aprecia las dimensiones del contenedor.
  • Object-fit: cover: Una de las mejores opciones, muy parecido a la propiedad background-size. El contenido se rellena en todo el elemento y la imagen no pierde su aspecto, sin embargo se genera un recorte de la imagen puesto que solo se muestra una parte de ella. En el caso de las miniaturas de una galería esta opción sería la adecuada, puesto que al hacer clic se abriría una modal y ahí si se mostraría la imagen por completo.
  • Object-fit: scale-down: El contenido se comporta como si se especificara none o container, lo que mostraría un tamaño más pequeño.
  • Object-fit: none: El contenido no se redimensiona.

Y no te preocupes por la compatibilidad, esta propiedad tiene un buen soporte en la mayoría de navegadores, puedes verificarlo entrando a este enlace:

https://caniuse.com/#search=object-fit   El único que no lo soporta es Internet Explorer. 

En nuestro canal hemos creado un tutorial en la cual realizamos una galería, te dejamos el enlace a continuación:

 

Esperamos que les sea de utilidad.