However, this doesn't always work flawlessly and by manually resizing your browser, it is quite easy to create a gap between the image on the left and the content on the right.
Also, parts of the image get cut off if you resize your browser below certain dimensions.
This is logical as the aspect ratio must be preserved, so that the image doesn't get squashed or stretched.
If I was you, I'd opt for Ryan's CSS solution, so that the image always fills the height of the viewport and live with the fact that 100% height, 100% width, correct aspect ratio and no cropping will not be possible.
If you're interested this is the code the other site uses to do the resizing:
//Resize Bottom Right Image
var image = jQuery("#bottomRightImage");
var imageParentElement = jQuery('#hp-rhs-bottom');
var widthRatio = imageParentElement.outerWidth() / imageRatio.width;
var heightRatio = imageParentElement.outerHeight() / imageRatio.height;
var ratio = Math.max(widthRatio, heightRatio);
width: Math.ceil(ratio*imageRatio.width) ,