how can I shape the image size according to its nested box

Question

there is a web site called: SPAM I am trying to make the same home page of this web site using js, jquery and some css.

Now, the question is how to fix the image size according to the box in the center. How can I create best user experience as if SPAM has.

You may experience by viewing the web site of SPAM in different resolution or small and big windows size of explorer.

How can I do it? Answers and code help or suggestions for the best user experience for SPAM ?

Answer 1

This is flash... but you can do the same with some jQuery:

html:

<div id="container"></div>

css:

#container {
    min-width: 500px;
    width: 100%;
    height: 100%;
    position: relative
    background: url('path') 0 0 no-repeat;
}

jQuery:

$(window).bind("resize", function() {
    var $winwidth = $(window).width(); //specify some padding here
    $("#container").attr({
        width: $winwidth
    });
});

Answer 2

To start, make the <did id='main'> to take the width of the screen

#main { width:100% }

then, the image(s) inside should have a similar styling:

#main img { width:100% }

please note that the image height is not set, to make it automatically scale with the right proportions.

This should help to obtain an effect similar to the mentioned site.

Answer 3

You can use

margin: 0 auto;

on the inner element so it is horizontally aligned.