在img大于div的不同div大小的地方垂直对齐不同的img大小

Question

我正在尝试垂直对齐 div 内的图像……这不是问题。

我的问题与这些条件有关。

1. 图像将不确定且大小不同。
2. 图像比 div 大，需要被 div 遮住。
3. 使用它的网站是建立在 320 & up 模板上的，调用媒体查询来为不同的屏幕尺寸呈现页面，因此包含的 div 因屏幕尺寸而异。
4. 当在智能手机/平板设备上查看时，包含的 div 将在设备转动时改变大小（无页面刷新）——图像需要保持居中。

我不能使用display:table-cell因为图像比 div 大，所以使用这个选项，div 的高度和overflow:hidden不起作用。

我试过 jQuery vAlign 效果很好..如果您不更改屏幕尺寸（例如转动设备）。 由于它在(document).ready上被调用，因此页面需要刷新以更新图像的 alignment。

有没有办法通过媒体查询触发 vAlign？ 如果没有，是否对 table-cell 方法进行了破解/修复，这将允许较小的div用overfolw:hidden掩盖较大的img ？

更新：一直在玩纯 CSS （这里的工作示例）但仍然无法让它工作:(

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 class 只是一个虚拟 div，用于显示当前哪个 div 将垂直对齐，您应该只替换应用程序中该 div 的内容。