当窗口调整大小时移动图像或向上分割？答案

【问题标题】：Move Image or Div Up As Window Resizes?当窗口调整大小时移动图像或向上分割？
【发布时间】：2011-02-22 20:10:27
【问题描述】：

我的 html 中有一张带有“拉伸”类的图片。

目前，使用 css，此图像会随着窗口大小重新调整为屏幕宽度的 100%。我还希望它在调整窗口大小时向上移动。

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

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

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

谢谢，

韦德

【问题讨论】：

标签： jquery css resize window move

【解决方案1】：

使用相对 top 值（百分比等）。

【讨论】：

不幸的是没有工作。我认为它必须与jquery一起使用。类似于 top = 屏幕宽度的百分比。

【解决方案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;
});

【讨论】：

所以无论您以哪种方式调整窗口大小，图像都会向上移动？我要试试这个，但如果窗口变大，我实际上需要图像向上移动，如果窗口变小，我需要它向下移动。
哦，它也不应该应用于高度值，只调整窗口的宽度。
希望这更有用。
不幸的是，它的表现相当粗略。每次将屏幕大小调整为 1024 时，它都需要在相同的位置，每次在 1280 等时，它都需要在相同的位置。现在它会从 1920 的某个位置开始，我会重新调整它的大小到 1280 再把它带回 1920，这将是一个与以前不同的地方。这个 si 的一点是图像中有一个兴趣点或焦点，随着屏幕尺寸的调整和图像的扩展，它总是需要保持存在。您希望我提供一个指向我拥有它的链接吗？
这应该是你想要的，我测试过了。