imgがdivより大きい別のdivサイズで異なるimgサイズを垂直に整列する

Question

div内に画像を整列しようとしています...問題ありません。

これらの条件で私の問題が発生します。

1. 画像は異なるサイズの&となります。
2. 画像はdivより大きく、divによってマスクする必要があります。
3. ページを異なる画面サイズにレンダリングするためにメディアクエリを呼び出す、012 &アップテンプレート上に構築されたサイトです。画面サイズによって表示されるdivが異なります。
4. スマートフォン/タブレットデバイスで表示したときに、デバイスをオンにしたとき（ページをリフレッシュしない場合）には、含まれているdivのサイズが変更されます。

のdivとoverflow:hiddenのhieghtは動作しません。このオプションを指定したので、画像はdiv要素よりも大きいので、私はdisplay:table-cellを使用することはできません。

私はjQuery vAlignを試してみましたが、画面サイズを変更していない場合（デバイスを回すなど）は素晴らしいです。 (document).readyで呼び出されているので、画像の位置合わせを更新するにはページをリフレッシュする必要があります。

メディアクエリでvAlignをトリガーする方法はありますか？ テーブルセルメソッドのハック/フィックスがない場合、小さいdivにはimgをoverfolw:hiddenでマスクすることができますか？

UPDATE： は:(

Answer 1

を純粋なCSS（working example here）で遊んでてきたが、まだそれが仕事を得ることができない私はあなたが何を意味するのかわからないんだけど、私は次の構造を使用して、正しく理解している場合

<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の内容だけを置き換える必要があることに注意してください。