在较小的固定高度元素中垂直对齐高度可变的图像

Question

我有以下HTML，可以更改，但希望保持原样。

<div class="c">
     <img ...>
</div>

图像大小可变，并且应在div中垂直居中。 我目前正在使用以下CSS：

.c {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.c img {
    width: 40px;
    height: auto;
}

我尝试在CSS中使用table和table-cell方法，但是容器会扩展以适合图像，即使overflow: hidden 。 我考虑过服务器端方法，例如使用position: relative ，在<img>上具有负的top值，但如果不需要的话，宁愿不要在页面上使用任何其他服务器端处理。 我不想使用JavaScript，因此，如果这是我唯一的选择，我将在服务器端进行操作。
我应该提到，图片将始终为40x40px或更大。

这个小提琴演示了我正在尝试使用display: table 。

Answer 1

在这里看看： http : //www.vanseodesign.com/css/vertical-centering/

您可以选择最舒适的方法。

Answer 2

..................... 演示

您好，现在习惯了vertical-align:top img tag vertical-align:top像这样抛出 css

img {
     vertical-align:top;
}

现场演示

Answer 3

我已经决定采用一种更简单的方法，该方法不会在较旧的浏览器上缩放图像，但会在较新的浏览器上缩放图像，并且使用更少的代码。 使用此CSS，HTML基本上可以只是一个<div>标记。

div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}

background-size: cover将允许兼容CSS3的浏览器缩放图像以适合div，而较旧的浏览器仍将图像居中，但不能缩放。 这不是一个完美的解决方案，但肯定会适合我的情况。