Переместить изображение или разделить как размер окна?

Question

У меня есть изображение в моем html с классом "stretch".

В настоящее время, с помощью css, это изображение изменяет размеры, так как окно изменяется на 100% ширины экрана. Я также хотел бы, чтобы он двигался вверх по мере изменения размеров окна.

Я предполагаю, что это можно сделать с помощью jQuery, но я не совсем уверен. По сути, «верхнее» значение css просто нужно изменить, как и ширину экрана.

Вот CSS, который в настоящее время изменяет его размер:

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

Спасибо

Wade

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

Answer 2

Используйте относительное top значение (в процентах и ​​т. Д.).