更改新的Google Recaptcha宽度

我们刚刚开始实施新的google recaptcha，如https://www.google.com/recaptcha/intro/index.html

然而，新的方法似乎被包含在一个iFrame中，而不是embedded到页面中，从而使应用CSS更加困难。

然而，我们已经得到了宽度为400px的表格，所以我们希望recaptcha具有相同的宽度。

目前看起来像，但是我们希望它和其他的一样。

有谁知道如何做到这一点呢？

谢谢

Answer 1

这是一个工作，但并不总是一个伟大的，取决于你有多大的规模。 可以在这里find说明： https ： //www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha { transform:scale(0.77); transform-origin:0 0; } 

更新： Google通过参数增加了对更小尺寸的支持。 查看文档 – https://developers.google.com/recaptcha/docs/display#render_param

Answer 2

更多兼容性：

  -webkit-transform: scale(0.77); -moz-transform: scale(0.77); -ms-transform: scale(0.77); -o-transform: scale(0.77); transform: scale(0.77); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; 

Answer 3

有点晚，但我有一个简单的解决方法：

只需将此代码添加到您的“g-recaptcha”类：

 width: desired_width; border-radius: 4px; border-right: 1px solid #d8d8d8; overflow: hidden; 

Answer 4

不，目前你不能。 这只有在旧的回合才有可能，但我相信你将来可以做到这一点。

我没有办法解决，而是提出一个build议。 我有同样的问题，所以我集中了recaptcha div（ margin: 0 auto;display: table ），我认为它看起来比左alignment的div好多了。

Answer 5

对于noCaptcha Recaptcha的新版本，以下对我有用：

 <div class="g-recaptcha" data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK" style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7); transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div> 

参考

Answer 6

 .g-recaptcha{ -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand'); } 

Answer 7

我在文档就绪事件中有这个函数，以便reCaptchadynamicresize。 任何人都应该能够放弃这个地方去。

 function ScaleReCaptcha() { if (document.getElementsByClassName('g-recaptcha').length > 0) {parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth; childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth; scale = (parentWidth) / (childWidth); new_width = childWidth * scale; document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')'; document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0'; } } 

Answer 8

这是我的工作：

1）添加一个包装div到recaptcha div。

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2）添加javascript / jQuery代码。

 $(function(){ // global variables captchaResized = false; captchaWidth = 304; captchaHeight = 78; captchaWrapper = $('#recaptcha-wrapper'); captchaElements = $('#rc-imageselect, .g-recaptcha'); resizeCaptcha(); $(window).on('resize', function() { resizeCaptcha(); }); }); function resizeCaptcha() { if (captchaWrapper.width() >= captchaWidth) { if (captchaResized) { captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', ''); captchaWrapper.height(captchaHeight); captchaResized = false; } } else { var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15)); captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0'); captchaWrapper.height(captchaHeight * scale); if (captchaResized == false) captchaResized = true; } } 

3）可选：如果需要添加一些样式。

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }