Te muestro cómo lograr que todas las imágenes de tu grid de Bootstrap se ajusten a un formato cuadrado utilizando un sencillo fragmento de CSS personalizado.
See the Pen Responsive grid of square images with Bootstrap by Marta Fagúndez (@martafagundez) on CodePen.
El código HTML utiliza el sistema de grid de Bootstrap para crear una galería de imágenes responsive.
Dentro de un contenedor (.container), se define una fila (.row) con columnas (.col) que se ajustan automáticamente según el tamaño de la pantalla, gracias a las clases de Bootstrap row-cols-2, row-cols-md-3, y row-cols-lg-4. Esto significa que la galería muestra 2 columnas en pantallas pequeñas, 3 en pantallas medianas y 4 en pantallas grandes.
Cada imagen dentro de las columnas tiene la clase .img-square, que aplica un CSS personalizado.
Este CSS establece que las imágenes ocuparán el 100% del ancho de su contenedor (width: 100%), mantendrán una proporción cuadrada de 1:1 (aspect-ratio: 1/1), y se recortarán para ajustarse al contenedor sin distorsión (object-fit: cover).
Esto asegura que todas las imágenes aparezcan como cuadrados perfectos, independientemente de su tamaño o proporción original.✅