Stretching images while retaining their aspect ratio..?

Question

Hello,
I'm looking for a method that will allow me to resize an image (div background or regular img) to fit as tall and wide as the container allows, while retaining the image's native aspect ratio.
The method I'm currently using is :
#bg {
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:0;
    overflow:hidden;
    z-index:-1000;
#bg img {
    height:100%;
<div id="bg"><img src="/images/image0.jpg" /></div>
However, this method only seems to work when the body is the container, and will only keep one of the two axis within view. I can specify either height:100% or width:100%, but not both because that will skew the images natural aspect ratio.
What I'm trying to accomplish is to block off 100 pixels at the bottom for navigation, 300 pixels on the right of the viewport for a text column, and leave the rest to be filled by an image that would stretch as much as the space allows (again, while retaining its aspect ratio).
Your suggestions are welcome!

Answer 1

Hello
First of all, you should never use dreamweaver option to modifie an image. Always use the appropriate programe to resize your image ( Photoshop or illustrator). Even if the web standart are 72 dpi you might never know what is the format of your image, and by stretching too much or downscaling it's size too much you will .. well.. have a low result.
Next : why do you want to keep a zone for navigation ?. Background by default cover everthing, and if you put your navigation on top of it, it will cover the background and make it invisible at that spot because your navigation will be on top of it.
Anyway What you want to do is first define exactly the maximum size of your Bg minus the zone you want to keep blank. Then put the bg and use option like Margin-right, margin-top to force the image to be where you want it to be.
Margin-bottom: 100px for exemple.
You can achieve that in your CSS setting i believe.
Hope this help.