SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Getting products images to size correctly

    How and what is the correct way to get all my product images to size correctly?

    I am having some images that are stretching like this:

    http://79.170.40.244/healthmeansweal...an-and-sunnah/

    and then some images that are cutiing short like this:

    http://79.170.40.244/healthmeansweal...-of-treatment/

    How do I get each one the same size but not stretch and not cut?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It all depends by what you mean " to size correctly"?

    If you want the images displayed at their native size then you just have to do nothing except ensure there is room for them. Of course as you have various image sizes then they will all be a different size.

    The question is really more about your expectations of what you want to happen?

    If, as you have done, you force the image to be 300px wide then its height if not set will be based on the aspect ratio of the original image and could be very tall or very small depending on the original image but always be 300px wide.

    If for example you want the image to always be 300px wide and 200px tall then you would need to force that size with css (or in the image attributes) but that will result in the aspect ratio of the image being changed and the image appearing stretched or squashed. You can't resize an image in the browser to an exact width and height and have it still look the same.

    What some sites do is ensure that the images they are using are within a pre-defined size at the time they obtain them so that they don't run into this issue. If you already have a database full of various sized images then it becomes a matter of choosing the best approach and trying to keep the images within a pre-defined target area. Usually this means setting min and max width and heights but you may end up with images being cut off or not fully displaying. After all you can't just make the image fit into a space it wasn't designed for without something changing.

    You could set the width to 300px if that is what you want and then set the height to:auto so that you maintain the aspect ratio but perhaps if you held that image in a a container of a fixed height you could merely hide the overflow. This would ensure the image wasn't squashed, maintains its aspect ratio but will result in possibly some of the image being missing where the overflow cuts it off.

    We did have a quiz a while ago that shows how to centre unknown image dimensions within a pre-defined area but not to scale the image but rather to always center them. Of course that means for large images you may miss some important part of the image because you are only looking at the center.

    The question is really "What did you expect to happen"?

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B ; ok I just expect them to behave nicely , I know that's a cop out but let me tell you what I don't get.

    Here I have a pic sized 95x250 and I think the css is set to width 300px auto. So i understand it will be stretched width wise but see how it's now 789px in height:
    http://79.170.40.244/healthmeansweal...de-12-x-250ml/

    So my question for this is how do I get this to look nice?

    Lets take another for example. If I use the small pic that is sized 135x200 it appears blured it becomes stretched so I thought I'd use a larger picture so it does not stretch. Actully it look nice but it cut off at the bottom and top:
    http://79.170.40.244/healthmeansweal...the-prophet-2/

    Should it be that I just resize all my images in fireworks first?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    hantaah, you need to be clearer about the meaning of "look nice" and "behave nicely". Do you want the images to be a specific height or width? Do you want them to fill a container whose dimensions may be different than those of the image?

    I can't really improve on @Paul O'B 's post.

    If height is the more important measurement, then specifiy {height:value} and {width:auto} to maintain the image's aspect ratio, where "value" is the desired number of pixels.

    Unless you want the images to auto-resize in a fluid site, which does not seem to be the objective, then using exacty size images is the best method of assuring that they will fit in their container easily without becoming mis-shapen, blurry, or exaggerated.

    You need to be clear about the meaning of "look nice" and "behave nicely".

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Here I have a pic sized 95x250 and I think the css is set to width 300px auto.
    did you mean margin: 300px auto? The width property only takes ONE value.

    Lets take another for example. If I use the small pic that is sized 135x200 it appears blured it becomes stretched so I thought I'd use a larger picture so it does not stretch. Actully it look nice but it cut off at the bottom and top:
    IN ANY MEDIA, anytime you use a picture that is maller than the size it will be displayed you will get blurring. If you need an image to display at AT MOST 135 x200 then the image needs to actually be AT LEAST 135 x 200.


    going back to my first question, if you set the width to 300px ( not 300 auto), the image will be scaled proportionally. You could set width and height via CSS or if your design takes the image's aspect ratio into account you could use max-height instead of height.

    hope that helps

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    @Paul O'B ; ok I just expect them to behave nicely , I know that's a cop out but let me tell you what I don't get.

    Here I have a pic sized 95x250 and I think the css is set to width 300px auto. So i understand it will be stretched width wise but see how it's now 789px in height:
    http://79.170.40.244/healthmeansweal...de-12-x-250ml/
    How else can it look? If the height didn't expand it would appear squashed.

    I explained the reasons why in my first post (and so have others) but to make it simpler your original image is 250px tall which is roughly 2.6 times the width value. Therefore if you increase the width value and want to maintain the correct aspect ratio then the height must increase to 2.6 times the new height (300 x 2.6 = 780px tall) - which is what you get. If you wanted the height to stay at 250px then you would leave the height attribute untouched and just increase the width but that would result in a very squashed looking image as its aspect ratio would be compromised.

    You can't increase the width of an image and then have it magically change into another image. Even if you resize the images in Fireworks you will have to do more than resize them as that would still give you the same problems. You would need to modify them in some way to look ok at the dimensions you require.

    So my question for this is how do I get this to look nice?

    You could use images within a certain size range and then display them centred in a container rather than stretching them to fit the container.

    As I said in my first post "What do you expect them to look like"? If you can show a diagram or drawing of what you think would be feasible then we may be able to make other suggestions

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok so in this pic http://79.170.40.244/healthmeansweal...the-prophet-2/ the bottom is cut off. if I make the height in inpect element 389px that shows it all although the height should be set to auto but it's staying at 300px.
    So should I increase each individual img to the size of the actual image being used and whar css code do I do to pick the individual images out?

    Or your sugestion about centering soulnds good how is that done?

    On the other hand this pic http://79.170.40.244/healthmeansweal...an-and-sunnah/ does seem to be on auto as the height has stretched to 444px. As the original image is smaller this is looking stretched so the centreing idea would be good here too I think, what do you think?

    I hope I explained it better this time sorry

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix; @Paul O'B ; ok so in this pic http://79.170.40.244/healthmeansweal...the-prophet-2/ the bottom is cut off. if I make the height in inpect element 389px that shows it all although the height should be set to auto but it's staying at 300px.
    So should I increase each individual img to the size of the actual image being used and whar css code do I do to pick the individual images out?

    Or your sugestion about centering soulnds good how is that done?

    On the other hand this pic http://79.170.40.244/healthmeansweal...an-and-sunnah/ does seem to be on auto as the height has stretched to 444px. As the original image is smaller this is looking stretched so the centreing idea would be good here too I think, what do you think?

    I hope I explained it better this time sorry

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    dresden_phoenix; @Paul O'B ; ok so in this pic http://79.170.40.244/healthmeansweal...the-prophet-2/ the bottom is cut off. if I make the height in inpect element 389px that shows it all although the height should be set to auto but it's staying at 300px.
    Hi,

    If you are referring to this image then its normal intrinsic height and width is 300 x 300 anyway! If you set it to with 300px and height:auto then maintaining the correct aspect ratio the image will automatically get sized to 300px height because that will maintain the correct aspect ratio of the image.

  10. #10
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    If you are referring to this image then its normal intrinsic height and width is 300 x 300 anyway! If you set it to with 300px and height:auto then maintaining the correct aspect ratio the image will automatically get sized to 300px height because that will maintain the correct aspect ratio of the image.
    Ok so does it mean that I have to style each individual image of the products and if so how do I single out each one or can you help me o what you said above about centering them and setting their size in fireworks?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    Ok so does it mean that I have to style each individual image of the products and if so how do I single out each one or can you help me o what you said above about centering them and setting their size in fireworks?
    Hi,

    It's still not really clear what you want to happen as such.

    Read my post #2 again to see the options.

    The only reasonable solution is to set a max-width on the image and let the height be auto then at least you won't get content cut off. You can't force the images to all be square and maintain their aspect ratio unless you resize and crop them also. You can center them in the width quite easily if you set the img containers width to the max-width you set for the image and then set text-align:center on the image (which would need to remain display:inline).

    I'm sorry if we appear to be awkward but its not a problem that has an easy solution unless you can find a script to resize and crop images on the fly within a pre-determined range.


Bookmarks

Posting Permissions

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