Browser compatible image resizing

[adarshyam]

Hi,

I am working on an interesting task which is now turning into a headache.. any help greatly appreciated..

There are a few images on a website with height and width 500px each for the image container box and the images have various sizes less than 500px height and width. Now what I am trying to do is, get the images from the website and resize it to 200px height and width and display as 'background image' on container box on my HTML. I cannot do it manually as they are dynamic. I am able to achieve it on FF but I want it to work on all major browsers (IE 7,8,9, FF 3.6, 8.0, Chrome, Safari, Opera).

Below is the css that im using which is good for FF

.itemImage .imgDiv {
background-position: center canter;
background-repeat: no-repeat;
background-size: 200px auto;
width: 200px;
height: 200px;
}

[rtrethewey]

Since older versions of Internet Explorer don't support all of those CSS properties, you can't do it with a background property. You could use layers with z-index to display your background images underneath your existing content so that you could have control over the image size and location. Good luck!

[adarshyam]

Hi, thanks for your reply. I am not supposed to use the <img> tags because of the load time issue as there are plenty of images loading. The z-index i see is for layering but I am not trying to do that. I am trying to display images individually from another website but resized to a smaller size. I am basically looking for an alternate property for background-size which is compatible with all browsers or a hack which would help resize images on older browsers cuz its working on new browsers with background-size property.

[rtrethewey]

Whether you use an <img> tag or the background property doesn't affect loading time unless you're using sprites to share the image across mutliple elements.

The only cross-browser compatible method of resizing a background image would be to use a server-side script that could do the resizing before the image is sent to the user's browser. If you can't write one yourself, look for a thumbnail maker script. You should be able to easily modify it so that it will accept a size setting for width or height through a query string.

[adarshyam]

ok, Thanks.