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

我有下面的HTML，我可以更改它，但是我更愿意保持简单

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

我曾尝试在CSS中使用table和table cell方法，但容器会扩展以适合图像，即使有

溢出：隐藏
。我考虑过服务器端方法，比如在
上使用
position:relative
和负
top
值，但如果不需要，我更愿意不在页面上使用任何额外的服务器端处理。我不想使用JavaScript，所以如果这是我唯一的选择，我将只在服务器端使用它。

我应该提到的是，图像总是40x40px或更大

演示我试图使用的
display:table
查看此处：

您可以选择最适合的方法。
..

Hi现在用于
img标签中的
vertical align:top
如下所示抛出css

img {
     vertical-align:top;
}

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

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

background size:cover
将允许兼容CSS3的浏览器缩放图像以适应div，而较旧的浏览器仍将居中显示图像，但不会缩放图像。这不是一个完美的解决方案，但肯定适用于我的情况。
这些解决方案中的每一个都适用于较大div中div的典型垂直对齐，但如果垂直对齐的元素大于其容器，并且是动态大小，则不起作用。如果不需要
节点，您可以尝试这样做：似乎您应该使用javascript/jquery来实现这一点。@Passerby，我更喜欢使用这种方法，但由于图像的宽度和高度可能都更大，而且
背景大小
还没有得到很好的支持，我更喜欢使用
标记。如果另一个解决方案似乎效果不太好，我想我可以将图像两个方向居中，并为支持它的浏览器添加一个
背景大小
。@a我在小提琴中没有使用
背景大小
，只使用了
背景位置
，甚至在IE中也支持它。@Passerby:我知道你使用了
背景位置
，这就是我要使用的，但是由于图像可能比容器更宽更高，我希望它们能够水平缩放以适应它，然后垂直对齐。
div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}