7

I have a basic web page layout with a 100% width header and a sticky footer. In between the two I have a large graphic.

I would like the graphic to resize dynamically depending on the size of the window.

I prefer not to use flash, and was wondering if there is an easy way to do this with jquery/javascript.

I'm not much of a jquery/javascript expert so I was wondering how to approach this of there is a component out there that already does it.

Dkong
  • 2,748
  • 10
  • 54
  • 73

4 Answers4

10
<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

This will resize your image to match your container and keep the ratio in place. If you set the container to a percentage everything will scale.

wrapper width = 960px divided by screen width = 1640px

If you want the entire site to be responsive you have to do the math all the way down. divide the child by it's parent. Hope this helps!

Alan
  • 101
  • 1
  • 2
5

Set the image containers width in percent as in width:{amount}%;, then set the image's width in percent also. This way your image container expands as your image expands also, or at least it will seem like so, because the image is actually expanding as the container expands. You dont necessarily need to set the image width to 100%, but whatever with you set is relative the containers width.

Babiker
  • 18,300
  • 28
  • 78
  • 125
  • Alternatively, set the `height:...%`. This will be as a percent of the height of the positioned parent. If you set only the width or height, the other will be calculated for you based on the aspect ratio of the image. – Phrogz Jan 01 '11 at 04:11
  • Won't this result in distorted image? – Yash Saraiya Dec 03 '15 at 12:13
2

If you're willing to rely on CSS3 and display your image as a background in an element, consider using background-size. Going this route allows you to resize the image while preserving its aspect ratio.

Here's a quick example of background-size.

This can of course be done manually if you monitor the window size using JS and resize accordingly. If you are interested in going this route, let us know. I would advocate using a pure CSS solution for something so trivial, if possible, so you don't alienate users with JS disabled.

Xenethyl
  • 3,179
  • 21
  • 31
1
img.thespecialimage {
  min-height : 100%;
  min-width : 100%;
  max-height : 100%;
  max-width : 100%;
}
Gabriel
  • 18,322
  • 2
  • 37
  • 44
  • Gabriel, I'll try this out. Do you know if it will it work in all browsers? – Dkong Dec 31 '10 at 23:08
  • Depending on the environment (and if you're willing to use CSS3), proper scaling might be helpful: http://robertnyman.com/css3/background-size/background-size.html – Xenethyl Dec 31 '10 at 23:09
  • @Xenethyl you should post that as an answer, I will upvote that. @Dkong you may find some weirdness in IE5 and maybe a little in IE6 but that should work most everywhere else. – Gabriel Dec 31 '10 at 23:11
  • Done! I would also agree that IE would be the problem browser when dealing with min- and max- CSS settings. The other major browsers deal with these options fine, as far as I'm aware. – Xenethyl Dec 31 '10 at 23:19