javascript - 在 img 大于 div 的不同 div 尺寸中垂直对齐不同的 img 尺寸

Question

我正在尝试垂直对齐 div 中的图像……没问题。

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

1. 图片大小不定。
2. 图片比div大，需要被div屏蔽。
3. 使用它的网站建立在 320 及更高版本的模板上，调用媒体查询来呈现 不同屏幕尺寸的页面，因此包含的 div 因屏幕尺寸而异。
4. 在智能手机/平板电脑设备上查看时，包含的 div 会在设备转动时改变大小(无页面刷新)——图像需要保持居中。

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

我试过 jQuery vAlign，效果很好.. 如果你不改变屏幕尺寸(比如转动设备)。因为它是在 (document).ready 上调用的，所以页面需要刷新以更新图像的对齐方式。

有没有办法通过媒体查询触发 vAlign？ 如果没有，是否有对 table-cell 方法的破解/修复，这将允许较小的 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 的内容。