Question

我正在尝试将图像作为屏幕的中心放置，就像计算

一样

       var wh = jQuery(window).innerHeight();
        var ww = jQuery(window).innerWidth();
        var fh = jQuery('.drop').innerHeight();
        var fw = jQuery('.drop').innerWidth();

我不确定我在哪里犯了这个错误。为了调整窗口的大小，我尝试了

jQuery(window).resize(function() {
                var wh = jQuery(window).innerHeight();
                var ww = jQuery(window).innerWidth();
                var fh = jQuery('.drop').innerHeight();
                var fw = jQuery('.drop').innerWidth();
            });

但即使我调整窗口大小，上面的脚本也无济于事，图像也不会对准中心。

即使我调整窗口大小，是否有办法将图像显示为中心。

以下是 fiddle

Answer 1

你应该尝试一下，

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

Demo

Answer 2

您可以单独使用css执行此操作：

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

Fiddle 和 Article

Answer 3

我在我的项目中做过这样的事。

.side {
height: 357px;
background-color: red;
overflow: hidden;
position: relative;
}
.middle {
position: absolute;
left: 50%;
margin-left: -250px;
background:url('a.jpg') no-repeat;
width:500px;
height:357px;
}


<div class="side">
<div class="middle"></div>

如何将图像定位为中心甚至调整窗口大小

3 个答案: