The Good Stuff
My solution: hack the thumbnail’s source with JavaScript, then use CSS to set it to the appropriate size. See it in action here. The following function uses jQuery, but it would be fairly easy to do the same thing without it if your project isn’t already using it:
function resizeThumbnails ($container) {
$images = $container.find('img'); // Get all the images inside your $container
$images.each (function (index, element) {
$src = jQuery(element).attr('src'); // Get the image's source
jQuery(element).attr('src', $src.replace('-400x284', '')); // Remove the thumbnail size portion from the source and replace it
});
}