HTML
|
1 2 3 4 5 6 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
* { box-sizing: border-box; } .container { max-width: 300px; background: #ccc; padding: 20px; } .g-recaptcha { transform-origin: left top; -webkit-transform-origin: left top; } |
Script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// 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 ) ); }); |