Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image resizing without distorting the image

    Hi,

    I have a php page wherein it retrieves images of different sizes. I need to display all the images in a uniform format. I tried altering the size of the image by altering the width and height attributes but I am getting distorted images.

    Kindly guide me on this.

    Thanks in advance.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    http://shiftingpixel.com/2008/03/03/...image-resizer/

    probably worth a look

    you could also look at cropping the image using css/php and resizing all of them to a given width.

    but working with images of varying dimensions isn't "easy" per se to get consistently accurate, non-distorted images. at least no method i've personally ever used.

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by ksreeniv View Post
    I have a php page wherein it retrieves images of different sizes. I need to display all the images in a uniform format. I tried altering the size of the image by altering the width and height attributes but I am getting distorted images.
    From your comment that if you set both height and width the images distort, I take it that the images have different aspect ratios. If that is the case then it will be impossible to get a completely uniform format (ie same size and width) without at least one compromise.

    The simplest solutions to implement are to use a uniform width or a uniform height. That is set some thing like height="150" or width="100" but not both.

    This will have all your images resized by the browser to be the same height or width with the other dimension being altered by the browser so that the image maintains its aspect ratio.

    If you want images that are the same size (both width and height) you will need to in some way crop the images, which can be problematic when done automatically as the important part of the image will sometimes be in the area that gets cropped.

    HTH.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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