垂直对齐不同div大小的不同图像大小，其中图像大于div

Question

我正试图将div中的图像垂直对齐......不是问题。

我的问题出现在这些条件下。

1. 图像将不确定＆amp;不同的尺寸。
2. 图像比div大，需要被div掩盖。
3. 使用它的网站建立在320＆amp;模板，调用媒体查询来呈现 不同屏幕尺寸和页面的页面因此，包含的div会因屏幕尺寸而异。
4. 在智能手机/平板电脑设备上查看时，包含div会在设备转动时更改尺寸（无页面刷新） - 图像需要保持居中。

我无法使用display:table-cell因为图片比div大，所以使用此选项时div的高度和overflow:hidden不起作用。

我尝试了jQuery vAlign，如果你没有改变屏幕尺寸（例如转动设备）那就很好。当它在(document).ready上调用时，页面需要刷新才能更新图像的对齐方式。

有没有办法通过媒体查询触发vAlign？ 如果没有，那么表格单元方法是否存在黑客/修复，这会使较小的div用img掩盖较大的overfolw:hidden？

更新： 一直在玩纯CSS（working example here），但仍无法使其工作:(

Answer 1

我不确定你的意思，但如果我理解正确，请使用以下结构

<div class="vertical">
    <div class="wrapper"><img src="image.jpg"></div>
</div>

以下CSS

div.vertical { display:table-cell } 
div.wrapper { display:block;position:relative;overflow:hidden; }
div.wrapper img { position:absolute; }

你应该能够掩盖（如裁剪？）图片并能够垂直对齐它们。请注意，div.vertical类只是一个虚拟div，用于显示当前垂直对齐的div，并且应该仅替换应用程序中该div的内容。