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

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

图像保持其自然大小（width: auto; height: auto;），除非它们大于容器（max-width: 100%; max-height: 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兄弟姐妹垂直对齐，在这种情况下我们没有兄弟姐妹。因此，我们还需要另一个中间垂直对齐的内联块元素，其高度与容器相同。或容器上的伪元素，它是一样的。

这个伪元素将具有height: 100%;，使其垂直中间与其父级width: 0;的垂直中间重合，这样它就不会影响图像的水平对齐（当图像的时候自然宽度＆lt;容器的宽度）。它也会像图像一样display: inline-block;和vertical-align: middle;。

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

Answer 2

这实际上是我在Stackoverflow上提出的第一个问题！现在我知道Ana已经提出了一个可行的解决方案，我想我也会发布我的IE8以后的工作方式：

http://jsfiddle.net/crtpq2jg/

基本加价：

<div class='container'>
  <img src='http://www.lorempixel.com/100/200' />
</div>

CSS：

.container {
  float: left;
  width: 180px;
  height: 210px;
  text-align: center; /* to center align horizontally */
  line-height: 210px; /* Equal to container height */
  font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
  }
  .container > img {
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    vertical-align: middle;
    }

Answer 3

This will work in IE 8 (demo) 来自ana答案的HTML

诀窍是使用after伪元素将容器line-height扩展到自己的高度。

通过这种方式，您可以使用常规text-align和vertical-align以及max-width和max-height。

.container {
  display: inline-block;
  position: relative;
  border: solid .25em deeppink;
  width: 8em;
  height: 10em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.container img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.container:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

Answer 4

看看这个jsfiddle：http://jsfiddle.net/jQN4L/

max-width和max-height会导致图片缩小（如果需要），但不会向上扩展。水平居中使用text-align完成。使用line-height和vertical-align进行垂直居中，但此方法确实要求容器具有已知高度。

HTML：

<div id="d1">
    <img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
    <img src="http://i.imgur.com/VAZNIev.jpg" />
</div>

CSS：

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
div {
    text-align: center;
    font-size: 0;
}
#d1 {
    width: 200px;
    height: 100px;
    line-height: 100px;
    background: red;
}
#d2 {
    width: 100px;
    height: 200px;
    line-height: 200px;
    background: green;
}

Answer 5

改变我的答案 - 应该更好地阅读这个问题！

html：

<div class="img_wrapper">
  <img class ='full_width' src="1.png" />
  <img class ='full_width' src="2.png" />
  <img class ='full_width' src="3.png" />
</div>

css：

.img_wrapper {
 width: 860px;
 margin: 30px;
 }
.full_width {
 width: 200px;
 height: 200px;
 float: left;
 margin: 10px;
 vertical-align: middle;
}
.full_width img {
 max-width: 100%;
 max-height: 100%;

}