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

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

其思想是，大于容器的图像将具有响应性（即缩小），而小于容器的图像将显示为“原样”

我的问题有三个方面：

如何处理响应元素，因为我们需要考虑各种纵横比（即水平与垂直与正方形）

必要时如何垂直对齐

本机大小不超过其容器的图像不应放大

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

有什么想法吗

---

更改我的答案-应该更好地阅读问题

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解决方案：

图像保持其自然大小（

width:auto；height:auto；

），除非它们比容器大（

max width:100%；max height:100%）；

），在这种情况下，它们将取其超过的容器的大小，并相应地缩放另一个容器

将图像定位在容器的中间：给他们<代码>位置：绝对<代码>，把左上角放在容器的中间（<代码>顶部：50%；左：50%；< /代码>）。然后将它们向上向左平移计算尺寸的一半，不管它们是什么（

transform:translate（-50%，-50%）；

）

此解决方案在中有效。遗憾的是，这不包括IE8及更老版本和Opera Mini

---

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

首先，给图像

显示：内联块

设置
文本对齐：居中以便宽度小于容器的图像水平居中

现在确保它们垂直在中间。给他们
垂直对齐：中间对齐，但这还不够<代码>内联块
元素与其
内联块
同级元素垂直对齐，在本例中，我们没有同级元素。因此，我们还需要另一个中间垂直对齐的内联块元素，该元素与容器具有相同的高度。或者容器上的伪元素，也是一样的

这个伪元素的高度为100%
使其垂直中间与其父对象的垂直中间重合，
宽度：0这样它就不会影响图像的水平对齐（当图像的自然宽度<容器的宽度时）。它还将有
display:inline块和
垂直对齐：中间就像图像一样

我们还需要
空白：nowrap，以防止伪元素在下方移动（并且不会以这种方式影响图像的垂直对齐）。
请查看此JSFIDLE：

如果需要，
max width
和
max height
会使图像缩小，但不会放大。使用
文本对齐
完成水平居中。垂直居中是通过
行高
和
垂直对齐
完成的，尽管此方法确实要求容器具有已知高度

HTML:


来自安娜答案的Html

诀窍是使用
after
伪元素将容器
行高度扩展到它自己的高度

这样，您可以使用常规的
文本对齐
和
垂直对齐
以及
最大宽度
和
最大高度

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

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


基本标记：

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

这将拉伸图像，这是他不希望发生的事情。我错过了较小图像的“原样”。这很好，只是我应该指定它需要在IE8中正常工作。目前无法实际测试它，但可能也应该在IE8中工作。没关系。：）你不能真的修改别人的笔，并让更改显示在同一个url上（但我知道这也很快就要来了！：D）抱歉，耽搁了这么长时间。我没想到这么快就能得到这么好的回答！谢谢你，安娜。这太棒了！令人印象深刻的解决方案，谢谢安娜！
.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: "";
}

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

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

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

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

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