Square thumbnails, object fit?

[jess888]

Having trouble getting image proportions to remain normal in these square thumbnails:
Philadephia Organizing Project • Changing Places
San Rafael Organizing Project • Changing Places
I think I might need to add an "object fit" piece to the CSS but I'm not sure how...?
Anyone?
CSS used:

.square-images.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item-inner > a {
  padding-bottom: 100% !important;
  height: 0 !important;
  display: block !important;
  position: relative !important;
}
.square-images.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img {
  height: 100% !important;
  position: absolute !important;
  width: 100% !important;
  top: 0 !important;
}

 

[Johna]

I think I might need to add an "object fit" piece to the CSS but I'm not sure how...?

Yep, on the right path.
Use the cover value for the object-fit property on the image.

 

[jess888]

Yep, on the right path.
Use the cover value for the object-fit property on the image.

Thank you ever so much.

 

[MilesWeb]

The object-fit property specifies how the content of an element should be resized to fit within the container.

You can use object-fit: cover; property to ensure that the image covers the entire container.

-------------------------

.square-images.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item-inner > a {
  padding-bottom: 100% !important;
  height: 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden;
}

.square-images.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  top: 0 !important;
  position: absolute !important;
}

-------------------------

Also, for better compatibility, you need to test this in different browsers.