Fit images (both landscape and portrait) into square thumbnail

Question

I'm really struggling to get images that are both landscape and portrait orientation to fit nicely into a square thumbnail for the purpose of a gallery.

I've tried a variety of CSS tricks but think i need to maybe use Javascript.

Anybody have any idea how i could solve this?

EDIT - the HTML/CSS can be anything, at present it simply prints out images with a class of thumb-square, ie.

<img class="thumb_square" src="/images/uploads/pic.jpg"/>
<img class="thumb_square" src="/images/uploads/pic2.jpg"/>
<img class="thumb_square" src="/images/uploads/pic3.jpg"/>

Answer 1

One possible solution (tested): Display each thumbnail in a div. Show the thumbnail using the css background property, and center with no-repeat. You must specify the width and height of the containing div. Set the width and height to the maximum width/height of all your thumbnails. I.e. if your thumbnails are 150px*200px and 200px*150px, set all divs to be 200px*200px. The thumbnails will then be centered within a 200px*200px box, regardless if they are in portrait or landscape "mode".

Example:

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic2.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic3.jpg') no-repeat center;
   border:1px solid red;">
</div>