How to scale images proportionally

Hi
I have a div which is 424px wide and 329px tall and must remain this size. This has an img control in it that I populate with an image. Sometimes this image might be landscape, sometimes portrait and the actual dimensions of each image might vary; most of the time, they are quite a bit larger than the dimensions of the aforementioned div.

The problem is that, if I want to load a landscape image into the img control inside that div, I don't want it to exceed the width of the div (424px), and therefore would like to scale it down to 424px, and have the height adjust accordingly/proportionally (Im aware that by keeping it proportional, it will obviously mean the height of this image wont always be the same height as the div, but shorter).

Likewise, if the image is portrait, I need to scale the image down so its no taller than the 329px tall div, and to scale the width proportionally (again, this will obviously mean the full width of the div will not be occupied but this is ok).

My CSS isn't great so any help with this would be much appreciated.

Thanks in advance.
StarnzyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Try this:
<script>
aspect_ratio =1;
function initPage() {
  img = document.getElementById('img1');
  w = img.width
  h = img.height
  /* calculates aspect ratio */
  aspect_ratio = h/w;
  document.title="Aspect ratio:" +aspect_ratio + " wxh:"+w+"x"+h
  reloadImage()
}
 
function reloadImage(){
  document.getElementById('displayDiv').style.visibility='hidden'
  if(!document.all) {
  available_width=innerWidth;
  available_height=innerHeight;
  } else {
  available_width=document.body.clientWidth;
  available_height=document.body.clientHeight;
  }
  new_w = available_width-20;
  new_h = parseInt(new_w * aspect_ratio);
  document.getElementById('img2').width=new_w
  document.getElementById('img2').height=new_h
  document.getElementById('displayDiv').style.visibility='visible'
}  
</script>
<body onLoad="initPage()" onResize="reloadImage()">
 
 
<div id="displayDiv" style="visibility:hidden"><img id="img2" src="http://www.rnrh.net/images/blog/hdr-sunset_soon_forgotten.jpg"></div>
<div style="visibility:hidden" width="1" height="1"><img id="img1" src="http://www.rnrh.net/images/blog/hdr-sunset_soon_forgotten.jpg"></div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.