javascript - 具有固定宽度和高度容器的各种缩略图图像的对齐和大小调整

Question

我正在寻找一个简单的解决方案来实现以下内容。缩略图不会被裁剪，但它们所在的容器始终具有相同的高度/宽度。

想法是大于容器的图像会响应(即缩小)，而小于容器的图像将“按原样”显示。

我遇到的问题有三方面:

1. 如何处理响应式元素，因为我们需要考虑各种宽高比(即水平、垂直或正方形)
2. 必要时如何垂直对齐
3. 本身不大于其容器的图像不应放大

显然，如果这可以仅使用 CSS 来完成，那就太好了，但我知道可能需要 javascript。如果是这样的话，我正在寻找一个轻量级的解决方案，因为缩略图网格可能会变得很长。

有什么想法吗？

Answer 1

纯 CSS 解决方案:

demo

.container {
  display: inline-block;
  position: relative;
  width: 8em; height: 10em;
}
.container img {
  position: absolute;
  top: 50%; left: 50%;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  transform: translate(-50%, -50%);
}

图像保持其自然大小(宽度:自动；高度:自动；)除非它们大于容器(最大宽度:100%；最大高度:100% ;)，在这种情况下，他们将采用超出容器的大小并相应地缩放另一个容器。

将图像定位在容器中间:给它们 position: absolute 并将它们的左上角放在容器中间(top: 50%; left: 50% ;)。然后将它们向左和向上平移它们计算出的尺寸的一半，无论它们是什么 (transform: translate(-50%, -50%);)。

此解决方案适用于 browsers supporting 2D transforms .遗憾的是，这不包括 IE8 及更早版本和 Opera Mini。

---

一个更好的兼容性解决方案(我现在无法在 IE8 中实际测试，所以我只是假设它也应该在那里工作)是:

demo

.container {
  display: inline-block;
  width: 8em; height: 10em;
  text-align: center;
  white-space: nowrap;
}
.container img {
  display: inline-block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  vertical-align: middle;
}
.container:after {
  display: inline-block;
  height: 100%; width: 0;
  vertical-align: middle;
  content: "";
}

首先，给图片display: inline-block;。

在容器上设置 text-align: center; 以便宽度小于容器的图像水平居中。

现在要确保它们也垂直位于中间。给他们 vertical-align: middle;，但这还不够。 inline-block 元素相对于它们的 inline-block 兄弟元素垂直对齐，在这种情况下我们没有 sibling 。所以我们还需要另一个中间垂直对齐的内联 block 元素，它与容器具有相同的高度。或者容器上的伪元素，都是一样的东西。

这个伪元素将有 height: 100%; 以便它的垂直中间与其父元素和 width: 0; 重合所以它不会' 影响图像的水平对齐(当图像的自然宽度 < 容器的宽度时)。它还将具有 display: inline-block; 和 vertical-align: middle; 就像图像一样。

我们还需要 white-space: nowrap; 在容器上，以防止伪元素在图像占据整个区域时移动到下方(并且不会影响图像的垂直对齐方式)容器的宽度。