Resize all images in a div as the window size changes

Question

I have an image that I created to be a home page. I used Photoshop to slice it up and saved it as a set of styled div's. Typically when I make a website of this nature, I create a few different sizes and use javascript to detect the available window size and load the appropriate page. I want to step up my game and do the same style website but use some form of jquery to re-size all images while constraining proportions as the screen gets smaller/larger.The website could have a maximum size and become smaller, maybe even load a maximum size depending on available screen width/height.

Right now I found a plugin called jquery-imagefit and it does a great job at scaling the images with the window size change. For some reason when I implemented it, the images separate from one another creating gaps between each image.

Can anyone help me implement imagefit into this website. Ideally the image would float at the bottom of the screen and grow and shrink from there. Here is a link to the page:

http://www.uvm.edu/~areid/homesite/div-style/index.html

thanks

katie

Answer 1

As I suggested above, you can use CSS floats to organize the images and size them using percentages.

I typed up some code that may help you.

HTML:

<div class="everything">

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/01.gif" style="width:100%">
    </div>

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/02.gif" style="width:31%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/forehead-mouse.gif" style="width:38%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/04.gif" style="width:31%">
    </div>

</div>​

CSS:

.everything{
    width:100%;
}

.row{
    overflow:hidden;
}

.row img{
    float:left;
}​

You can view it on JSfiddle: http://jsfiddle.net/9MEn7/5/

Obviously that isn't a complete solution I created, but it should get you started. I would suggest that you cut up the images in a more practical manner, such as making the images in a "row" the same height.