html - 适合对象 : cover with percentages

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>

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