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.