Thumbnail resizing

Hi,

I’ve managed to translate and personalize this wonderful theme, but so far the only thing I’ve not been able to do is avoid thumbnail resizing, if it means zooming in the image bigger than the original size.

For example, one of the sites I maintain (sorry, in Spanish):
http://www.emsirinx.com/artesanado

The post titled ‘Concierto de formas I (las danzas)’, where the picture shows a colleague of mine with a green dress and her pupils sitting, the image is blurred because the original size is smaller than the thumbnail.

Or, scrolling down, the post titled ‘Características de un superhéroe’, the image shows someone hiding behind a drawed ‘superhero’. I’d like images to be resized if the original image is bigger than the thumbnail, but not enlarged if the image is smaller.

The ‘hard way’ would be uploading, just for those posts, a new featured image, with some white strips added at both sides, for example, but I’m sure there’s some CSS trick to do it better (and easier).

So far I’ve tried creating a child theme, and putting this into style.css:
.wp-post-image {
display:block;
max-width:100%;
max-height: 100%;
height: auto;
width: auto\9; /* ie8 */
}

It’s a wild guess, I’m not much of an expert in CSS. I tried with only max-widht: 100% and height: auto, and then adding max-height: 100%. The auto\9 part is something I read about avoiding a bug in ie8. Everything I tried works in Internet Explorer 10, but not in Firefox 20 or Chrome 26.

Any ideas?
Thanks
Juanfran