How To Make Image Elements Scale With Window Instead Of Repositioning

I have a project, where I have 4 images together in the middle of the window, laid out like this: 12 34 I want the images to all scale up and down with the window, but maintain th

Solution 1:

See this fiddle:

http://jsfiddle.net/LDt8P/

html , body , #centerArrows{
    display:table;
    width:100%;
    height:100%;
}
#centerArrows{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

---

Fiddle in response to the comment to restrict the image from spreading out to 4 lines:

http://jsfiddle.net/LDt8P/1/

---

Solution with JQuery to make the image smaller to fit the width of the window when the window width is smaller that a specific width:

http://jsfiddle.net/LDt8P/3/

Solution 2:

var initialWidth = $(window).width();
$(window).resize(function(){
    $('img').each(function(){
        var img         = $(this),
            pos         = img.data('pos') || $(this).offset(),
            imgWidth    = img.data('width') || img.width(),
            ratio       = $(window).width() / initialWidth,
            newImgWidth = imgWidth * ratio,
            newImgLeft  = pos * ratio;
        img.css({
                width: newImgWidth + 'px',
                left: newImgLeft + 'px'
            });
    });
}).resize();

Here is a simple jQuery implementation. In this case you have to use position: fixed or position: absolute (in this case the elements relative parent should be the body.

The code is untested... (sorry, i don't really have time now)