垂直對齊img大於div的不同div大小img大小

Question

我試圖垂直對齊div內的圖像...不是問題。

我的問題出現在這些條件下。

1. 圖像將不確定&不同大小。
2. 圖像比divs大，需要被div屏蔽。
3. 使用此網站建立在320 &向上模板上，調用媒體查詢爲不同屏幕尺寸渲染 頁面&因此，包含的div根據屏幕大小的不同而不同。
4. 當在智能手機/平板電腦設備上查看時，包含div會在設備打開時更改大小（不刷新頁面） - 圖像需要保持居中。

我不能使用display:table-cell，因爲圖像大於div，所以使用此選項div和overflow:hidden的高度不起作用。

我試過jQuery vAlign，它工作的很棒..如果你不改變屏幕尺寸（比如轉動設備）。因爲它在(document).ready上被調用，所以頁面需要刷新以更新圖像的對齊。

有沒有辦法通過媒體查詢觸發vAlign？ 如果不是有表格單元法的黑客/修復，將允許較小的div掩蓋較大的img與overfolw:hidden？

UPDATE： 被玩弄純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的內容。