reCAPTCHA Responsive Scaling

HTML

<div class="container">
  <p>This captcha will scale when the browser window is smaller than its current width (304 px)</p>  
  <form action="" method="get">
    <div class="g-recaptcha" data-sitekey="6SSSSSSBIgEAplK2EWsVFkaE5o0DWUpsIs"></div>
  </form>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  max-width: 300px;
  background: #ccc;
  padding: 20px;
}

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

Script

// Resize reCAPTCHA to fit width of container
// Since it has a fixed width, we're scaling
// using CSS3 transforms
// ------------------------------------------
// captchaScale = containerWidth / elementWidth

function scaleCaptcha(elementWidth) {
  // Width of the reCAPTCHA element, in pixels
  var reCaptchaWidth = 304;
  // Get the containing element's width
 var containerWidth = $('.container').width();
  
  // Only scale the reCAPTCHA if it won't fit
  // inside the container
  if(reCaptchaWidth > containerWidth) {
    // Calculate the scale
    var captchaScale = containerWidth / reCaptchaWidth;
    // Apply the transformation
    $('.g-recaptcha').css({
      'transform':'scale('+captchaScale+')'
    });
  }
}

$(function() { 
 
  // Initialize scaling
  scaleCaptcha();
  
  // Update scaling on window resize
  // Uses jQuery throttle plugin to limit strain on the browser
  $(window).resize( $.throttle( 100, scaleCaptcha ) );
  
});