object-fit: cover with percentages

Question

I'm using percentages to scale thumbnails in a gallery on my website, and I can't get object-fit: cover to work with them. I'm trying to use object-fit so I can get the thumbnails to actually be square instead of whatever aspect ratio the images themselves have.

This is what my code looks like:

<div class="gallery">
  <a href="#"><img class="tile" src="#"></a>
</div>

(the a and img tags repeat a bunch of times in each of the gallery divs)

And this is my CSS:

.gallery {
  width: 100%;
  max-width: 1400px;
  min-width: 600px;
  margin: 0 auto;
  margin-top: 1rem;
  font-size: 0px;
  margin-bottom: 3rem;
}

.gallery img{
  display: inline-block;
  object-fit: cover;
  width: 25%;
}

The only object-fit that works is none which does manage to contain them in the square shape but also doesn't scaled them down at all.

I don't think I can use something other than percentages, because I need the thumbnails to scale down when the gallery div itself does.

https://jsfiddle.net/c8se4wbL/ Because the size of the pictrures is dynamic I can't have a set height for them, which causes them to just scale proportionally to the height. — hazelnot, Jul 19 '17 at 10:24

Ori Drori · Accepted Answer · 2018-01-19T00:35:34.240

To get a square the height should be equal to the width. If you need to use a percentage of a container (.gallery in this case) you can do so with the maintain aspect ratio trick:

html,
body {
  margin: 0;
}

.gallery {
  width: 100%;
  max-width: 1400px;
  min-width: 600px;
  margin: 0 auto;
  margin-top: 1rem;
  font-size: 0;
  margin-bottom: 3rem;
}

.gallery a {
  position: relative;
  display: inline-block;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
  width: calc(25% - 0.2rem);
}

.gallery a::before {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  content: "";
}

.gallery a img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div>
  I'm the content above the gallery
</div>

<div class="gallery">
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
  <a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
  <a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
  <a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
</div>

<div>
  I'm the content below the gallery
</div>

If you need a percentage of the view port width, you can use vw:

body {
  margin: 0;
}

.gallery {
  width: 100%;
  max-width: 1400px;
  min-width: 600px;
  margin: 0 auto;
  margin-top: 1rem;
  font-size: 0;
  margin-bottom: 3rem;
}

.gallery img {
  display: inline-block;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
  object-fit: cover;
  width: calc(25vw - 0.2rem);
  height: calc(25vw - 0.2rem);
}

<div class="gallery">
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Hasegawa_Tohaku_-_Pine_Trees_%28Sh%C5%8Drin-zu_by%C5%8Dbu%29_-_right_hand_screen.jpg"></a>
  <a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
</div>

object-fit: cover with percentages

1 Answers1