dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Browser compatible image resizing

  1. #1
    Join Date
    May 2010
    Posts
    40

    Browser compatible image resizing

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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    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!

  3. #3
    Join Date
    May 2010
    Posts
    40
    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.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,160
    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.

  5. #5
    Join Date
    May 2010
    Posts
    40
    ok, Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles