How can I display images at certain dimensions without stretching it?

I tried the following, but it only works if the image is taller than its width. What's the bes开发者_运维知识库t way to do this without PHP (I know about timthumb) and preferably no Javascript?

<div style="height:100px;width:100px;overflow:hidden;">
<img src="image.jpg" style="width:100px;" />
</div>

there's no way to mantain image w/h ratio in this case using only css

in future we will have

<div style="height:100px;width:100px;background-color:red;
background-image:url('asd (2).jpg');background-size:contain;
background-repeat:no-repeat;background-position:center;"></div>

working with firefox / webkit, probably opera

so now you need javascript!

hope this helps

You can use the PHP GD and image function getImageSize() docs

and then render your html by calculating the sizes out based on the ratio you want.

The best way I can think of WITHOUT php, is to use the image as a background to a div - so

<div style="height:100px; width:100px; 
background:url('whatever.jpg') no-repeat center center;"> </div>

obviously the overflow gets cut off, but you have your dimensions sorted.