在窗口调整大小时移动图像或向上分割？ [英] Move Image or Div Up As Window Resizes?

问题描述

我在我的html中有一个图像，有一个伸展类。

I have an image in my html with a class of "stretch".

目前，使用css，此图像的大小随着窗口大小是屏幕宽度的100％。我也想在窗口正在调整大小时向上移动。

Currently, with css, this image re-sizes as the window re-sizes to be 100% of the screen width. I would also like it to move upwards as the window is being re-sized.

我假设这可以用jQuery做，但我不太确定。基本上，topcss值只需要随着屏幕宽度的变化而变化。

I'm assuming this can be done with jQuery but I am not quite sure. Basically the "top" css value just needs to change as the screen width does.

这里是当前正在调整大小的css：

Here is the css that is currently re-sizing it:

.stretch {
width: 100%;
height: auto;
min-height: 420px;
position: absolute;
top: -200px;
}

感谢，

Wade

推荐答案

var origWidth;
$(document).ready(function() {
    origWidth = $(window).width();  //store the window's width when the document loads
});

$(window).resize(function() {
    var curWidth = $(window).width(); //store the window's current width
    var delta = (curWidth- origWidth);
    $(".stretch").offset({top:($(".stretch").offset().top + delta)});
    origWidth = curWidth;
});

这篇关于在窗口调整大小时移动图像或向上分割？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！