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.