3

我发现了这个 jQuery 代码，它允许在水平和垂直方向上都没有固定尺寸的 div 居中。它适用于窗口的高度和宽度。因此，当我调整窗口大小时，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

尝试这个。你不能像这样调用回调函数。

$(文档).ready(函数(){

$(窗口).resize(函数(){

$('.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

同时绑定 load 和 resize 事件，如下所示：

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

希望这可以帮助。

于 2016-04-28T16:45:44.927 回答