I'm currently working on a web application which (among other things) allows the user to browse a catalogue of products. Each product has an associated image, which should be shown next to the description on the screen. Images and product text are supplied by a third party.
All this is fine and dandy, until the supplied image is too large for the space allocated on the web page, when it completely screws up the text flow and pushes important information into invisibility. I have experimented with setting the height and width explicitly on the image tag, but this stretches small images and makes them look horrible.
I have little or no possibility of changing the appearance, box sizes, text flow or other on-screen stuff (it's all produced by the customer's high-power, high-price web designers), but I can add extra "invisible" JS/CSS behaviour if necessary.
What I would ideally like, is a way of showing an image at its "natural" resolution if both dimensions are smaller than a set limit, but downsizing the image to fit if it is too big. IE support is vital, Firefox important, other browsers nice to have.
Does anyone have any hints as to how I might achieve this? Is it even possible?
Hi, I have used couple of image resizing stuff, in some applications.For you i have come up with, a small piece of code:
Basic idea is, if you Frame/TD has got fixed width, then you have to resize the image, without loosing much clarity. The ratio (0.7476:1) is alright for that.here my TD width is 200px, while image res. is 800x600. I hope it will help you.
[ March 06, 2007: Message edited by: Subhadip Chatterjee ] [ March 06, 2007: Message edited by: Subhadip Chatterjee ]