在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 上被调用，所以页面需要刷新以更新图像的对齐方式。

有没有办法通过媒体查询触发 vAlign？ 如果没有，表格单元方法是否有破解/修复，这将允许较小的div 用overfolw:hidden 掩盖较大的img？

更新： 一直在玩纯 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 的内容。