3

水平方向と垂直方向の両方で固定寸法を持たないdivを中央に配置できるこのjQueryコードを見つけました。ウィンドウの高さと幅で機能します。したがって、ウィンドウのサイズを変更しても、divはウィンドウの中央に配置されたままです。

私の問題は、今のところ、最初にウィンドウのサイズを変更しないと機能しないということです。したがって、ページをロードするだけでは、ウィンドウのサイズを手動で変更しない限り、divは中央に配置されません。

もちろん、これは理想的ではありません。だから私はそれを回避する方法を見つけようとしています。しかし、私のjQueryスキルは非常に限られており、今は行き詰まっています。

これが私が取り組んでいるページです：http：//dev.manifold.ws/test2/（私が説明していることを確認するためにウィンドウのサイズを変更してみてください）

そして、これが私が使用しているjQueryです：

$(document).ready(function(){

$(window).resize(function(){

    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });

});
// This is suppose to initially run the function but it doesn't seem to work
$(window).resize();

});

誰かがこれを修正する方法のアイデアを持っていますか？ありがとう！

-トム

4

7 に答える 7

5 
$(document).ready(function(){
    doResize();
    $(window).on('resize', doResize);
});

function doResize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}

フィドル

于 2012-08-16T18:56:10.027 に答える
0

これを試して：

function adoptToSize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}

$(document).ready(adoptToSize);
$(window).resize(adoptToSize);
于 2012-08-16T18:56:38.233 に答える
0

なぜだめですか

$(document).ready(function() { 
    resize();
});

$(window).resize(function(){
    resize();    
});

function resize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}
于 2012-08-16T18:57:38.640 に答える
0

これを試して。このようなコールバック関数を呼び出すことはできません。

$（document）.ready（function（）{

$（window）.resize（function（）{

$('.img-holder').css({
    position:'absolute',
    left: ($(window).width() - $('.img-holder').outerWidth())/2,
    top: ($(window).height() - $('.img-holder').outerHeight())/2
});

}）;

$('.img-holder').css({
    position:'absolute',
    left: ($(window).width() - $('.img-holder').outerWidth())/2,
    top: ($(window).height() - $('.img-holder').outerHeight())/2
});

}）;

于 2012-08-16T18:58:02.567 に答える
0

$(document).readyこれは、DOMの準備ができた後、すべてのコンテンツが読み込まれる前に発生することを忘れないでください。

<img />サイズ変更機能を最初にトリガーしたときにロードされていない可能性があります...
ドキュメントのloadイベントまたは画像のロードイベント を使用してみてください。

ただし、ここでの最善の解決策は、画像に固定サイズを与えることです。

<img src="img/test.jpg" style="width:800px;height:519px;" />

また：

.img-holder img {width:800px;height:519px;}
于 2012-08-16T19:03:35.393 に答える
0

次のようなものを試してください：

+function($, window){
  var resizeWin = function(){
      $('.img-holder').css({
          position:'absolute',
          left: ($(window).width() - $('.img-holder').outerWidth())/2,
          top: ($(window).height() - $('.img-holder').outerHeight())/2
      });
  }

  $(function(){ resizeWin() });
  $(window).bind('resize',resizeWin);
}(jQuery, window, undefined);
于 2012-08-16T19:04:31.143 に答える
0

以下のように、ロードイベントとサイズ変更イベントの両方を同時にバインドします。

$(window).on('load resize', function () {
// your code
});

お役に立てれば。

于 2016-04-28T16:45:44.927 に答える