How to crop a image to have 1:1 aspect ratio CSS - php

Question

I want to show in a page all images from a specific file. I make it but I can't crop it like to show 4 images on a row and the heigh be the same like width.
This is php code for show images from file:
<?php
$files = glob("galery/*.*");
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
echo '<img class="img-display" src="'.$num.'" alt="random image">';
}
?>
This is CSS:
.img-display {
width: 25%; /* This make photos to aling 4 on a row*/
border: solid 5px white; /* This is for make a white spece between photos */
}
I want to show the imeges all at the same aspect ratio. Because if I have a portrait image, the heigh from this image is biger than the others.And if I give "max-heigh" is resizing the image and doesn't look good...
I try with clip but I can't make something good.
I reserch to google but can't find anything good for me.

Answer 1

You can use this:
.img-cropped {
object-fit: cover;
object-position: center center;
width: 250px;
height: 250px;
}
And it's browser support table: https://caniuse.com/#feat=object-fit
(thanks #giorgio)
This will display the image in 250x250 dimensions and the image will cover the container with center as the resize origin.
If you don't know the exact dimensions of the image, and will be using percentage as the width, then you need some javascript to equalize width and height's of the images.
For example:
var cats = document.querySelectorAll(".img-cropped");
var width = cats[0].clientWidth;
console.log(width);
for (var i = 0; i < cats.length; i++) {
cats[i].style.height = width + "px";
}
.container {
width: 80%;
margin: 0 auto;
}
.img-cropped {
object-fit: cover;
object-position: center center;
width: 24%;
}
<div class="container">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
<img class="img-cropped" src="http://placekitten.com/300/350">
</div>

Answer 2

This works! Thanks a lot for your help!
I leave here what I maked.
HTML/PHP:
<div class="galery-cont">
<?php
$files = glob("galery/*.*");
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
echo '<img class="img-cropped" src="'.$num.'" alt="random image">';
}
?>
</div>
<script>
var cats = document.querySelectorAll(".img-cropped");
var width = cats[0].clientWidth;
console.log(width);
for (var i = 0; i < cats.length; i++) {
cats[i].style.height = width + "px";
}
</script>
CSS:
.galery-cont {
padding-top: 210px;
width: 100%;
height: auto;
background: white;
}
.img-cropped {
border: solid 5px white;
object-fit: cover;
object-position: center center;
width: 25%;
}
But here I have another question...:) How can I make when I click on image(random one from the list) to open a slideshow like Modal and first image is image that I clicked.