jquery - レスポンシブポップアップウィンドウ

Question

Magnific Popups ajax popup を使用して、Instagram のようなポップアップエクスペリエンスを作成しています (左側の画像、右側のコメントなど)。左右のコンテンツボックスを常に同じ高さにする方法を見つけようとしています。右側の画像が大きすぎる場合は、反応する必要があるため、それに応じて div に収まります。また、ブラウザー全体が (おそらくモバイルデバイス上で) 小さくなると、画像が上部に表示され、コンテンツが下部に表示されます。

画像とコンテンツは次のようにフローティングされます。

.image_container, .content {
    width: 50%;
    float: left;
}

そして、メディアクエリを使用して画面サイズを縮小すると、フロートがクリアされます。

私が説明しようとしていることを理解するのに役立つように、jsfiddle を作成しました。

jsフィドル

「開く」をクリックして iframe のサイズを変更すると、探している効果が表示されます。

では、ビューコンテナーのサイズを設定し、左右のコンテンツ領域を常に同じ高さにするにはどうすればよいでしょうか? 単純に例を見るだけで、少しおかしいことがわかります。

編集

また、画像を垂直方向の中央に配置しようとしましたが、それも難しいようです。cssにテーブルセルを表示させようとしましvertical-align: middleたが、うまくいきませんでした。

このソリューションは、最新のすべてのブラウザーで動作するはずです。

score 4 · Accepted Answer

このようなものをお探しですか？
http://jsfiddle.net/d7hA5/

次の関数を検討してください。

// Handles the resize event
$(window)
    .off(".resizeImage")
    .on("resize.resizeImage", fnResizeImage);

// Resizes the content2 to fit with image height
function fnResizeImage (e) {
    var imgHeight = $('div.image_container > img').outerHeight(true);
    var cnt1Height = $('div.content > div.content1').outerHeight(true);
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height);
}

また、プラグインのドキュメントを参照することをお勧めします: Magnific-popup API

score 0 · Accepted Answer

これをチェックして：

jsfiddle

これはコードを少し変更したものです。（ヒントについては、質問のコメントを確認してください）。コンテナをdivでラップしました：

<div class="container">

そして、このいくつかの変更が css に追加されました:

.container {background-color: white}
.image_container, .content {
    /* width: 50%;*/
    float: left;
    background-color: #1c1c1c;
}
.content2 {
    height: 300px;
    overflow-y: auto;
}