I'm trying to display pre-set image thumbs without stretching or shrinking the image. My HTML looks like this:\[code\]<div class="container"> <img src="http://stackoverflow.com/questions/12753108/photo.jpg" alt="Test Photo" class="clipped" /></div>\[/code\]My CSS:\[code\].container{ height: 75px; width: 75px; overflow: hidden;}.container img.clipped { width: 100%; }\[/code\]
I would expect to see the center of the image in a 75 x 75 pixel container like below, i.e. vertically centered.
Any idea what I'm missing?