使用固定宽度和高度容器对齐和调整各种缩略图图像的大小

Question

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

这个想法是大于容器的图像会响应(即缩小),而小于容器的图像将"按原样"显示.

我遇到的问题有三个方面:

1. 如何处理响应元素,因为我们需要考虑各种宽高比(即水平与垂直与方形)
2. 如何在必要时进行垂直对齐
3. 本机不大于其容器的图像不应该按比例放大

显然,如果只能用CSS完成它会很棒,但我知道可能需要javascript.如果是这种情况,我正在寻找一种轻量级解决方案,因为缩略图网格可能会变得非常冗长.

有什么想法吗？

Answer 1

纯CSS解决方案:

演示

.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%);
}

图像保持其自然尺寸(width: auto; height: auto;),除非它们大于容器(max-width: 100%; max-height: 100%;),在这种情况下,它们将采用它们超过的容器的大小并相应地缩放另一个.

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

此解决方案适用于支持2D转换的浏览器.可悲的是,这不包括IE8和更老的Opera Mini.

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

演示

.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兄弟姐妹垂直对齐,在这种情况下我们没有兄弟姐妹.因此,我们还需要另一个中间垂直对齐的内联块元素,其高度与容器相同.或容器上的伪元素,它是一样的.

这个伪元素将height: 100%;使其垂直中间与其父元素的垂直中间重合,width: 0;因此它不会影响图像的水平对齐(当图像的自然宽度<容器的宽度时).它也将不得不display: inline-block;与vertical-align: middle;就像图像.

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