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

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();
            });

但是，即使我调整窗口大小，上面的脚本也无济于事，图像也没有与中心对齐。

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

这是小提琴

Answer 1

你应该试试看，

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

演示

Answer 2

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

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

小提琴和文章

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>