Como hacer una galería de imágenes miniaturas en css con object-fit

La mayoría de la aplicaciones necesitan una sección con una galería de imágenes en miniatura, existen varias maneras de hacerlo con CSS. Hay que tener presente que los usuarios pueden subir imágenes con distintos tamaños y el desarrollador frontend tiene que hacer que las miniaturas se vean bien.

Aparte de las maneras tradicionales de lograrlo, existe una propiedad CSS llamada object-fit con la cual podemos lograr este efecto. Con object-fit se mantiene el “aspect ratio”, al mismo tiempo se agrega espacio a los lados sin estirarla o distorsionarla.

Para que object-fit funcione el width y height debe ser definido. Los valores que se puede tomar son cover y contain. El soporte para esta propiedad no estan malo puedes verlo aqui:

http://caniuse.com/#search=object-fit

Tambien puedes usar este polyfill para navegadores que no lo soporten :

https://github.com/anselmh/object-fit

Aqui les dejo ejemplos que hice con todas las técnicas que conozco ademas de object-fit para hacer galería miniaturas


link
 https://demosthenes.info/blog/967/The-Widescreen-Web-Using-CSS-object-fit