CODEWITHSUNDEEP
javascriptimagelayoutresizefluid
Jaguar
Jaguar

Reputation: 19

Using JavaScript to dynamically resize images based on height of window/viewport

I'm trying to design a website for a photographer that will resize the height of images and thumbnails so that they fit the user's window size. This is the first time I have attempted a fluid layout rather than a fixed width one.

The images need to be resized based on the height of the browser, and must maintain aspect ratio.

To get a clearer idea of what my intention is, you can see the two designs i have (very much work in progress

http://annmariegrant.com/test1 (this design will have two or three rows of thumbnails, which will need to be resized based on the height of the window)

http://annmariegrant.com/test2 (this design will just have one row of images (a filmstrip), again, resized to fit the height of the window).

So far I just have a little test that access the .width DOM element of an image and changes it, but I just can't seem to get it to work properly, and am somewhat out of my depth, as I am sorta learning JavaScript on the fly here!

I hope I have provided enough detail for you to be able to help. Your responses will be greatly appreciated :)

Upvotes: 0

Views: 1784

Answers (2)

Kirk
Kirk

Reputation: 513

You want to recalculate the size of your images when window resizes. To do this, you need to put your JavasScript in the window resize event

window.onresize = function(event) {
    ...
}

In there you can recalculate the height and update your css style.

Upvotes: 0

Pete Duncanson
Pete Duncanson

Reputation: 3246

Don't bother. Use CSS instead. Set the width of the img to be 100% so it will always scale to max available width of the container which should also not have a width set but you can set a max and min width. This why when the screen is resized (or viewed on a different device) the image is scaled by the browser to be as large as it can be. No JS required.

Upvotes: 1

Related Questions