Thumbnail of a Portion of an Image While Maintaining Aspect Ratio - html

Question

I'm attempting to create thumbnails out of some images, each of which isn't necessarily the same size at the others.
Here is a Fiddle with my current code. I've read on some other sites, and even on here that I just need to set the width and height of the image class, then apply the overflow:hidden property, but that doesn't seem to be working. It's still changing the aspect ratio of the image. I know I could just simply remove either the height or width property, but I really just want to make a 100x100 crop of the image. I tried clip:rect() but couldn't figure out how to make it work. Ideally, I'd want to crop 100x100 from the center of the full-size image, but using clip, I don't think I can do this if the dimensions of my images aren't all the same.
.thumbnail {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
}

Answer 1

using css and html:
First solution:
html:
<div class="imageFrame">
<img src="your_path" alt="thumb" />
</div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
}
.imageFrame img{
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Second solution:
here you will have to use some JS to add dynamically the image url path to the <div class="imageFrame".
html:
<div class="imageFrame" style="background-image: url('your_path');"></div>
css:
.imageFrame {
overflow:hidden;
width:100px;
height:100px;
padding:10px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
border:10px solid #EEEEEE;
position:relative;
background-repeat: no-repeat;
background-position: center center;
}