css fluid layout image issues

Question

okay im making a layout that has two sides. the left is 30% and the right 70%. i have a widescreen monitor so all the images will display how i want them too with good room left. BUT on lower resolutions and the most common 1024x768, the image i made is too big for the left side and goes out of the borders onto the right side.. how would i make the image automatically resize to fit on smaller resolutions?

CSS

#left {
  float:left;
  width:30%;
  height:100%;
  position:fixed;
  padding:20px;
}

#right {
  float:right;
  width:70%;
  height:100%;
  position:absolute;
  padding:40px 20px;
}
#left img {
  ??
}

Answer 1

Try using max-width and a percentage value on the image. This way the image will never exceed that percentage.

For example:

img {
    max-width:90%;
}

Answer 2

Depending on your image, you could just add overflow: hidden on the #left div.

Answer 3

One of the ways to do this is add the image to the background of the #left div .

The image will not resize but it will also not flow over the borders.

You could make the background resize using CSS3, although there is not full browser support.

background-size:100% 100%; will make sure the image sizes to the entire div . However there may be some distortion.

Answer 4

This will do it:

#left img {
  width: 100%;
}