SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keep image aspect ratio

    Hello guys, I'm currently trying to display an image in a container that is fixed sized - the user will upload their avatar and it will be displayed in this container. The problem which i'm have is that the photo that is uploaded is going to be different sizes for different user and I need to display the photo in this container without it losing quality or losing its aspect ratio. What I would like to happen is when the photo is in the container it will re-size to the container dependant if it is landscape or portrait. For example if the photo is landscape it will size to 100% width but the height will be auto and of course the opposite if it was portrait.

    What I'm currently using is :

    HTML Code:
    min-width: 100%;
    min-height: 100%;
    Which works perfectly in all browse apart from the dreaded Internet Explorer!

    To get a better understanding of what I'm talking about you may view it at http://jsfiddle.net/Tq5nY/1/ - you may want to view it in both chrome and IE

    I'm also not sure of the best language to use for this - javascript, php, css?

    Thanks in advance.

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,359
    Mentioned
    80 Post(s)
    Tagged
    3 Thread(s)
    First you are saying the container is a fixed size then you are saying the container would be resized dependant on the content.

    Why not put the avatar onto a standard size canvas when it is created?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies for the confusion. What I mean by "fixed size" is that the container will never change size and will always be 205x164px. The photo's that the users will be uploading will of course be different sizes. The photos have to be resized in order for them to fit into this 205x164px container. If you take a look at the jsfiddle ( http://jsfiddle.net/Tq5nY/1/) you may understand better.

    Thanks.

  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)
    luke13,

    You could always require that the bloggers upload an image that fits within those dimensions.

    The next best method would be to have a script scale the image down to fit within the required dimensions.

    Another method would be to post the image as a background-image and use the (background-size:contain} property which works in most modern browsers but not older ones.
    http://caniuse.com/#feat=background-img-opts

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <title>{background-size:contain}</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1168130-Keep-image-aspect-ratio
    Thread: Keep image aspect ratio
    2013.09.09 16:57
    luke13
    http://caniuse.com/#feat=background-img-opts
    -->
        <style type="text/css">
    
    div {
        width:205px;
        height:164px;
        border:1px solid magenta;
        background-image:url('http://placehold.it/300x200');
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-size:contain;
        margin:0 auto;
    }
    
        </style>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you say something about how you want the images resized? If you just set the height and width to 100% then of course the image will get distorted. If you don't want it distorted but want it to fill the box then part of it may be cut off.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    luke13,

    You could always require that the bloggers upload an image that fits within those dimensions.

    The next best method would be to have a script scale the image down to fit within the required dimensions.

    Another method would be to post the image as a background-image and use the (background-size:contain} property which works in most modern browsers but not older ones.
    Thanks ronpat, however i would prefer it to be compatible with at least IE8.

    Quote Originally Posted by ralph.m View Post
    Could you say something about how you want the images resized? If you just set the height and width to 100% then of course the image will get distorted. If you don't want it distorted but want it to fill the box then part of it may be cut off.
    Honestly, I'm not sure - I've run out of idea. I've been stuck on this for a while and I'm finally looking for some help after hours of frustration. I just want the image to be high quality, position in the container without anything being cut of or misshaped. I'm thinking Javascript maybe they way to go. Have you guys got any suggestions or maybe share a snippet?

  7. #7
    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)
    Quote Originally Posted by luke13 View Post
    Thanks ronpat, however i would prefer it to be compatible with at least IE8.
    I agree

    A server-side script that would scale the image to fit, and therefore not serve more bytes than necessary, would be ideal. I'm sure they exist, they are useful for mobiles, but am not familiar with one. Perhaps someone else is.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    How about just this?

    Code:
    img {max-width: 100%; max-height: 100%;}
    Here is a demo:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    div {width: 205px; height: 164px; border: 5px solid red; text-align: center; display: table-cell; vertical-align: middle;}
    img {max-width: 100%; max-height: 100%; vertical-align: bottom;}
    
    </style>
    </head>
    <body>
    
    <div>
    <img src="http://placehold.it/150x50"  alt="text equivalent of image goes here">
    </div>
    			
    </body>
    </html>
    Just alter the image dimensions to test different sized images. The image will always fit in the box. The only thing you don't get is small images filling the box, but that may not be a bad thing anyway, as images that are scaled up will look blurry.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the code that I'm currently using and what is used in the jsfiddle link above. It seems to work great in all browsers except for Internet explorer.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Did you try my example? It works fine in IE for me (tested back to IE8).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    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)
    Quote Originally Posted by ralph.m View Post
    Did you try my example? It works fine in IE for me (tested back to IE8).
    Firefox doesn't agree (didn't try anything else). The table-cell treats width and height as min-width and min-height, so it expands to fit the image. You can change the width and height to max- and min-height, and max- and min-width. But as you mentioned, smaller than optimum images will not scale up.

    The same thing can be done this way without the table-cell: (IE8+)
    Code:
        <style type="text/css">
    
    div {
        width:205px;
        height:164px;
        border:5px solid magenta;
        text-align:center;
        margin:0 auto;
    }
    div:before {
        content:"";
        display:inline-block;
        vertical-align:middle;
        height:100%;
    }
    img {
        display:inline-block;
        max-width:100%;
        max-height:100%;
        vertical-align:middle;
    }
        </style>
    </head>
    <body>
    
    <div><img src="http://placehold.it/300x420" alt="alternate description of image"></div>
    
    </body>
    </html>
    Same problem with smaller than optimum images, though.

    The argument in favor of a server-side script includes optimizing the size of the image served to the user up and down, especially down.

    I just don't know where to find one.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, it's a pain the FF doesn't play ball. If you can stomach an extra div, this seems to work OK:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    div.outer {width: 205px; height: 164px; border: 5px solid red; text-align: center; display: table; table-layout: fixed;}
    div.inner { display: table-cell; vertical-align: middle; width: 205px; height: 164px;}
    img {max-width: 100%; max-height: 100%; vertical-align: bottom;}
    
    </style>
    </head>
    <body>
    <div class="outer">
    	<div class="inner">
    		<img src="http://placehold.it/150x150"  alt="text equivalent of image goes here">
    	</div>
    </div>		
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    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)
    I need to correct a statement I made in post #11. FF honors the fixed height of the table-cell, but not the width. It's only the width that extends past its assignment. It has other unexpected display:table behaviors, too.
    Off Topic:


    I've become sadly disillusioned with FF. The deal breaker is how it can very seriously hog CPU time. If only I were comfortable with Chrome....

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! Your examples work perfectly

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.

    Off Topic:


    Quote Originally Posted by ronpat View Post
    I've become sadly disillusioned with FF. The deal breaker is how it can very seriously hog CPU time. If only I were comfortable with Chrome....
    I reluctantly made the jump a year or two ago and haven't looked back.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •