我正在尋找一個簡單的解決方案來實現以下。縮略圖不會被裁剪，但它們所在的容器將始終具有相同的高度/寬度。固定寬度和高度容器的各種縮略圖圖像的對齊和調整大小
這個想法是，大於容器的圖像會有反應（即縮小），而小於容器的圖像將按原樣顯示。
我遇到的問題是三個方面：
顯然，這將是巨大的，如果這個可以用CSS只能做，但我理解JavaScript可能是必要的。如果是這樣的話，我正在尋找一個輕量級的解決方案，因爲縮略圖網格可能會變得很長。
有什麼想法？
純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測試，現在，所以我只是假設它應該在那裏工作過）將是：
.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;以防止僞元素在圖像佔據容器的整個寬度時在下方移動（並且不會影響圖像的垂直對齊）。
更改我的答案 - 應該有閱讀問題的更好！
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%;
}
這會拉伸圖像，這是他不想發生的事情。 –
我錯過了較小圖像的'原樣' –
看一看這個的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;
}
This will work in IE 8 (demo) 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;
}
這實際上是我在Stackoverflow上詢問的第一個問題！現在我知道安娜已經拿出一個可行的解決方案，我想我還張貼雷認爲以後的工作IE8：
基本標記：
<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;
}
偉大的解決方案。 –
這很好，除了我應該指定它需要在IE8中正常工作。 – ndimatteo
目前無法真正進行測試，但[**此版本**]（http://codepen.io/thebabydino/pen/zCxKo）應該也可以在IE8中使用。 – Ana