Keep image aspect ratio

HTML & CSS
1

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 :


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

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

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

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.


<!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

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.

6

Thanks ronpat, however i would prefer it to be compatible with at least IE8.

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

I agree :slight_smile:

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

How about just this?

img {max-width: 100%; max-height: 100%;}

Here is a demo:

<!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.

9

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

Did you try my example? It works fine in IE for me (tested back to IE8).

11

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+)


    <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. :frowning:

12

Ah, it’s a pain the FF doesn’t play ball. If you can stomach an extra div, this seems to work OK:

<!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>
13

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

Thanks guys! Your examples work perfectly :slight_smile:

15

You’re welcome. :slight_smile:

Off Topic:

I reluctantly made the jump a year or two ago and haven’t looked back.