Forcing a width using a div tag

[camaroboy]

I am inserting an RSS feed from an outside source into a content page. I was having a problem because the feed I am using has images that are about 700px wide and the page I am putting them on has a width of 550px. Currenty the div class tag I am using is as follows:

div.forcersswidth {
width: 550px;
overflow: hidden;
}

Due to the "hidden" attribute, the right parts of the images (larger than 550px) are chopped off. Is there anything I can put in this CSS to make it resize rather than chop off the overflow?

[Marshall]

div.forcersswidth img {
width: 550px; /* whatever works */
height: auto;
}

If this an iframe insert, this may not work.

Marshall

[camaroboy]

Marshall,

Thank you for your response! The CSS code you gave me works great to resize images larger than my content width (550px). Unfortunatly, images that are small in the feed are now resized larger. Is there a way I can only have it resize images that are larger than 550 px and do nothing to the images that are smaller?

[Marshall]

Maybe!? I know this is a problem when images are smaller than the CSS calls for. I use this trick to make thumbnails so I seldom, if ever, have an image smaller than what I am making it. I know this has been discussed on WebmasterWorld, but for the life of me, I cannot remember where, though it was not that long ago. Try a WebmasterWorld search for "resizing images using css" or check the CSS library. I vaguely recall some javascript was involved.

Marshall

[Xapti]

Yes, I use max-width property for img element.
This is not supported by <=IE6 (not sure about others. FF does support it, others probably too)
To get it to work for IE6, you can use javascript. Either separate javascript, or javascript which makes IE6 support(emulate) the max-width property (you don't need to code it up, you can find the free code online).

You can also combine overflow:hidden with max-width, So that you could crop 50 pixels as well as shrink it, so that the shrink is less pronounced.This can be done by having a max-width of 600px, and overflow:hidden of 600px.
From my experience, the shrinking seems to keep the proportions, So if it was 800x100, And max width was 600, the height will decrease automatically too, something which is generally desired, but may cause problems if you specifically allocated height space.

[edited by: Xapti at 6:38 pm (utc) on Sep. 22, 2007]