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

Some example html would help. Its hard to see what you are doing exactly from our end ;). — James Khoury, Jul 11 '11 at 01:29

score 1 · Accepted Answer · answered Jul 11 '11 at 01:31

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

answered Jul 11 '11 at 01:31

Danny Cooper

355
1
8
25

that sounds right. im guessing it resizes the image to make sure it fills 90% of the div width? – user645607 Jul 11 '11 at 02:01
If you haven't applied any other size attributes on the image it display at full size unless its full width is larger than 90% of the div that it's contained in, in which case its width will only be 90% of the div it's contained in. – Danny Cooper Jul 11 '11 at 02:04
If you want it _always_ at 90% of the div then just do width:90%. – Danny Cooper Jul 11 '11 at 02:04
okay thank you Danny Cooper. and which would you prefer for a logo? – user645607 Jul 11 '11 at 02:12
It depends, do you have a link to your site? – Danny Cooper Jul 11 '11 at 02:26
well its larzconwell.com but the part im working on isnt up at all right now, its going to look way different lol – user645607 Jul 11 '11 at 02:26

score 0 · Answer 2 · answered Jul 11 '11 at 01:30

0

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

answered Jul 11 '11 at 01:30

NotMe

87,343
27
171
245

Jason Gennaro · Answer 3 · 2011-07-11T01:40:46.617

0

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.

edited Jul 11 '11 at 01:40

answered Jul 11 '11 at 01:30

Jason Gennaro

34,535
8
65
86

score 0 · Answer 4 · answered Jul 11 '11 at 01:32

0

This will do it:

#left img {
  width: 100%;
}

answered Jul 11 '11 at 01:32

DA.

39,848
49
150
213

css fluid layout image issues

CSS

4 Answers4