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>

物体贴合：覆盖百分比

1 个答案: