Move Image or Div Up As Window Resizes?

天涯浪子 提交于 2019-12-30 13:56:43

问题


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


回答1:


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



回答2:


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



来源:https://stackoverflow.com/questions/2890396/move-image-or-div-up-as-window-resizes

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!