6

Magnific Popups ajax popup を使用して、Instagram や Facebook のようなポップアップ エクスペリエンスを作成しています (左側の画像、右側のコメントなど)。ライトボックス全体の最大高さを設定し、画像を垂直方向に中央に配置できる場合、画像を中央に配置するにはどうすればよいですか? これはすべてのブラウザーで機能する必要があり、応答性が高くなければならないため、注意が必要です。すべてのブラウザで正しく動作するようには見えません。これが必要になる可能性があるため、jQueryソリューションは気にしないと思います。

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

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

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

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

jsフィドル

iframe のサイズを変更して、効果を確認してください。

4

4 に答える 4

2

最善の方法はjqueryUI resizeです。

あなたのdiv（コンテナ）がウィンドウのサイズによって変化することを望むなら、あなたはそのような何かをするべきです：

$(window).resize(function() {
    var docheight = $(document).height();
    $("#container").height(docheight);
});
于 2013-07-04T18:14:28.883 に答える
1

質問全体を理解したかどうかはわかりませんが、これは画像を垂直方向および水平方向に中央揃えにする方法です。

デモ: http://jsbin.com/ukowar/1/edit

と組み合わせた絶対位置によるセンタリングmargin:auto

img {
  width:200px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

あなたの問題の一部に役立つことを願っています。

于 2013-07-14T08:29:32.170 に答える