Javascript 在img大于div的不同div尺寸中，垂直对齐不同的img尺寸

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

我的问题产生于这些条件

图像将不确定&大小不同

图像比div大，需要被div屏蔽

使用此功能的站点构建在320&up模板上，调用媒体查询来呈现 页面显示不同的屏幕大小，因此包含的div根据屏幕大小而不同

在智能手机/平板电脑设备上查看时，打开设备时，包含的div将改变大小（无页面刷新）-图像需要保持居中

我不能使用

display:table cell

，因为图像比div大，所以使用此选项div的高度和

溢出：hidden

不起作用

我尝试了jQuery vAlign，它非常有效。。如果您不更改屏幕大小（如转动设备）。正如在

（文档）上调用的那样。就绪

页面需要刷新以更新图像的对齐方式

有没有办法通过媒体查询触发vAlign？ 如果没有，是否对表格单元格方法进行了修改/修复，从而允许较小的

div

使用

overfowl:hidden

屏蔽较大的

img

更新：

---

我一直在玩弄纯CSS（），但仍然无法让它工作：（

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

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

---

你应该能够伪装（比如在作物中？）请注意，

div.vertical

类只是一个虚拟div，用于显示当前哪个div是垂直对齐的，您应该只替换应用程序中该div的内容。

添加额外div是一个关键点，但仍然无法实现k、 我现在正在研究类似的东西，它开始工作得更好，但仍然有bug

$（window.resize（function（）{$（“.img wrapper”）.vAlign（）；}）

您肯定不需要javascript来修复布局。请尝试将div.wrapper display属性设置为inline、inline block等。我认为这种方法行不通……也许会对您有所帮助？这应该是多余部分的剪辑。当然，有一种方法可以屏蔽/剪切元素中的超大图像并将其居中Y

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