更改新的Google Recaptcha(v2)宽度

Question

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

然而,新方法似乎包含在iFrame中而不是嵌入到页面中,因此使CSS应用更加困难.

然而,我们的形状是400px宽,所以我希望重新获得相同的宽度.

目前它看起来像,但我们喜欢与其他人一样.

有人知道怎么做吗？

谢谢

Answer 1

这是一个解决方案,但并不总是很好,取决于你扩展它的程度.解释可以在这里找到: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

不,目前你做不到.它只能用旧的recaptcha,但我相信你将来能做到这一点.

我没有解决方案,只有一个建议.我有同样的问题,所以我把recaptcha div(margin: 0 auto;display: table)集中在一起,我认为它看起来比左对齐div好多了.

Answer 4

我发现以下最佳方法可以调整 google recaptchas 的大小

选项 1：您可以使用内联样式调整 google ReCaptcha 的大小。

使用内联样式调整 google recapture 大小的第一种方法。内联样式是直接在页面的 HTML 中使用 style 属性应用于一个元素的 CSS 样式。以下示例向您展示了如何使用内联样式设置 Google reCAPTCHA 的样式。

<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>

选项 2：通过将以下样式放入您的页面（内部样式表）。

其次，您可以将 ReCaptcha 的样式放入 和 之间的页面中。内部样式表是 HTML 页面上包含样式定义的部分。内部样式表是通过使用文档区域内的标记来定义的。以下示例向您展示了如何使用外部样式表设置 Google reCAPTCHA 的样式。

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

选项 3：使用外部样式表调整 google ReCaptcha 的大小。

创建一个单独的文件并命名为 style.css 并在页面中的元素之间添加此文件链接。例如。.

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

来自博客的参考： https : //www.scratchcode.io/how-to-resize-the-google-recaptcha/

Answer 5

有点晚了,但我有一个简单的解决方法:

只需将此代码添加到"g-recaptcha"类:

width: desired_width;

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

Answer 6

对于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 7

我在文档就绪事件中有此功能，以便动态调整 reCaptcha 的大小。任何人都应该能够把它放在适当的地方然后去。

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

您可以使用 reCaptcha 中的参数。默认情况下，它使用normalon 值data-size，您只需要使用它compact来适应小型设备或某种小宽度布局。

例子：

<div class="g-recaptcha" data-size="compact"></div>