Vertical-align: middle - img in div (different size picture) - html

Question

I was not successful CSS. Should be in the center of the picture (different size) in the div. See an example:
And examples of html and css - http://jsfiddle.net/KJXUt/
HTML:
<div class="box">
<a href="#" class="pic">
<img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" />
</a>
</div>
<div class="box">
<a href="#" class="pic">
<img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" />
</a>
</div>​
CSS:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
overflow: hidden;
display: table-cell; /* <-- problem */
vertical-align: middle; /* <-- problem */
}
img {
max-width: 100px;
height: auto;
}
​
How to correct style? Help, please. Thanks in advance

Answer 1

The term to make a picture smaller without re-sizing it is called "cropping", to directly achieve your answer, a different css property: background will be used. And the div's will be removed. #Heliio's method is great if you need <div> tags.
A code sample is as following
HTML:
<a href="#" class="pic pic1">
</a>
CSS:
.pic {
display:inline-block;
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
}
.pic1{
background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat;
}
Note that the css has some negative values, these are extremely tedious to modify, but it's really just -((imagewidth-100)/2) x -((imageheight-100)/2)
http://jsfiddle.net/KJXUt/9/

Answer 2

When you use display: table-cell; it's forcing to fixed size to the cells. Maybe it's not a good solution.
I dont understand, if want really it, but:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
float:left;
width: 100px;
height: 100px;
overflow: hidden;
}
img {
max-width: 100px;
}
Example here: http://jsfiddle.net/KJXUt/1/
Or, if prefer: http://jsfiddle.net/KJXUt/3/

Answer 3

This is a simple technique to center the image vertically in .box
http://codepen.io/AntonNiklasson/pen/pkaov
To add more boxes next to eachother, add float: left to .box