object-fit:覆盖百分比

Question

我在我的网站上使用百分比来缩放图库中的缩略图，但我无法让object-fit: cover使用它们。我正在尝试使用object-fit，这样我就可以让缩略图实际上是方形的，而不是图像本身的纵横比。

下面是我的代码：

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

( a和img标记在每个gallery div中重复多次)

这是我的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%;
}

唯一可以工作的object-fit是none，它确实设法将它们包含在正方形中，但也没有将它们缩小。

我不认为我可以使用百分比以外的其他东西，因为当gallery div本身缩小时，我需要缩略图。

Answer 1

为了得到正方形，高度应该等于宽度。如果需要使用一定百分比的容器(在本例中为.gallery)，可以使用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>

​

如果需要一定百分比的视口宽度，可以使用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>

​