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 {
  ??
}

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%;
}

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

This will do it:

#left img {
  width: 100%;
}

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.