CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Les
Les

Reputation: 31

How to dynamically change image/div dimensions based on window size?

The ultimate goal (for me) is to create a very simple gallery that is almsot exactly like this example:

EXAMPLE: http://www.iheartdropdead.com/spring-summer-lookbook-2011.html

However, this gallery is made using Flash and I want mine to be made out of HTML, CSS & Javascript, for compatability I want to avoid using Flash.

I have no trouble making the gallery itself (the images transitioning in to one another) because I can use something like this:

freelancer-id.com/easy-gallery/2

My main struggle I'm having is filling the page how I want it to. If you look at the example above and resize the window you will see that it does 2 key things.

  1. Resizes the width of the gallery to fit the width of the window 1.1. Once gallery height is reached, it horizontally centers the gallery to fit the height of the window
  2. Vertically centers the gallery to fit the height of the window 2.1 Once gallery width is reached, it vertically centers the gallery to fit the width of the window

Now... I have half-accomplished the first objective by utilizing this piece of coding:

imgscale.kjmeath.com/

This works great for scaling down large images to fit the width of a containing Div. However it currently only does it when the page loads and does not change when you resize the window.

I do not know how to:

*Dynamically resize the gallery depending o nthe window size *Vertically/Horizontally center the image within the container div

If anybody has got any advice or could point me towards some tutorial or plugins which may help that would be great.

Upvotes: 3

Views: 3850

Answers (2)

Thomas
Thomas

Reputation: 231

You could do it with a Media Query. People have started to call this "responsive" design. You would simply have a different CSS sheet for different resolutions. Like this:

    <link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)" href="style.css" />

Here's an article that explains it a bit more: http://www.alistapart.com/articles/responsive-web-design/

Upvotes: 3

Yardboy
Yardboy

Reputation: 2815

I think much of what you want could be accomplished via a well-designed fluid css layout. However, for the trickier stuff know that you can use jQuery's .resize() method to bind to the window resize event and execute code accordingly.

Upvotes: 2

Related Questions