javascript - How to dynamically change imagediv dimensions based on window size? - Stack Overflow

admin管理员组

文章数量:1022670

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

EXAMPLE: .html

However, this gallery is made using Flash and I want mine to be made out of HTML, CSS & Javascript, for patability 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/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-acplished the first objective by utilizing this piece of coding:

imgscale.kjmeath/

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.

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

EXAMPLE: http://www.iheartdropdead./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 patability 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./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-acplished the first objective by utilizing this piece of coding:

imgscale.kjmeath./

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 5, 2019 at 18:56 Zoe - Save the data dump 28.3k2222 gold badges128128 silver badges160160 bronze badges asked Jun 23, 2011 at 18:24 LesLes 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./articles/responsive-web-design/

I think much of what you want could be acplished 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.

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

EXAMPLE: .html

However, this gallery is made using Flash and I want mine to be made out of HTML, CSS & Javascript, for patability 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/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-acplished the first objective by utilizing this piece of coding:

imgscale.kjmeath/

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.

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

EXAMPLE: http://www.iheartdropdead./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 patability 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./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-acplished the first objective by utilizing this piece of coding:

imgscale.kjmeath./

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 5, 2019 at 18:56 Zoe - Save the data dump 28.3k2222 gold badges128128 silver badges160160 bronze badges asked Jun 23, 2011 at 18:24 LesLes 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./articles/responsive-web-design/

I think much of what you want could be acplished 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.

本文标签： javascriptHow to dynamically change imagediv dimensions based on window sizeStack Overflow