Move Image or Div Up As Window Resizes?

Question

Hi,

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

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.

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.

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

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

Thanks,

Wade

Answer 1

Use a relative top value (percent, etc.).

Answer 2

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