更改新的 Google Recaptcha (v2) 宽度答案

【问题标题】：Change New Google Recaptcha (v2) Width更改新的 Google Recaptcha (v2) 宽度
【发布时间】：2015-02-25 18:56:44
【问题描述】：

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

但是，新方法似乎包含在 iFrame 中，而不是嵌入到页面中，因此使应用 CSS 变得更加困难。

但是，我们的表单宽度为 400 像素，因此希望重新验证码具有相同的宽度。

目前它看起来像，但我们希望它与其他产品一样。

有人知道怎么做吗？

谢谢

【问题讨论】：

请查看此解决方案stackoverflow.com/questions/27713505/recaptcha-api-v2-styling/…

标签： css iframe width recaptcha

【解决方案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

【讨论】：

data-size="compact" 对我来说并不那么紧凑。猜猜我们会坚持使用变换进行缩放
当应用这个技巧时，noscript 扩展会给我一个点击验证码被阻止的警告
你有扩展的链接吗？
效果很好，但它禁用了我正下方的提交按钮:(
更改 3rd 方组件 (google recaptcha) 的宽度会改变表单提交按钮的功能似乎很奇怪。

【解决方案2】：

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

我没有解决办法，只有一个建议。我有同样的问题，所以我将recaptcha div居中 (margin: 0 auto;display: table)，我认为它看起来比左对齐的 div 要好得多。

【讨论】：

解决了我的问题。谢谢
非常感谢@Luca Steeb，它的工作非常完美，就像魅力一样再次感谢:)

【解决方案3】：

为了更好的兼容性：

  -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;

【讨论】：

您可能不需要它：许多浏览器可以理解无前缀版本，而其他浏览器从未实现过前缀版本。如果您要支持使用前缀的浏览器，请使用此工具。您在 AutoPrefixer 中处理的示例没有 -moz- 或 -o-，因为它们不是必需的。

【解决方案4】：

我发现了以下调整 Google Recaptchas 大小的最佳方法

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

使用内联样式调整 google recapture 大小的第一种方法。内联样式是使用样式属性直接在页面的 HTML 中应用于一个元素的 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/

【讨论】：

我针对我的情况对其进行了一些修改，但它就像一个魅力，我为 recaptcha div 制作了一个自定义类并将其放在 css 文件中。但是内联也适用于开发，谢谢

【解决方案5】：

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

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

width: desired_width;

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

【讨论】：

这很好用。我认为隐藏带有隐藏溢出的recaptcha徽标可能违反条款/条件。我希望他们在不久的将来提供更好的自定义选项。
它很有帮助，也很简单。谢谢。

【解决方案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>

Ref

【讨论】：

【解决方案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';
     }
}

【讨论】：

未捕获的类型错误：无法读取 null 的属性“clientWidth”

【解决方案8】：

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

示例：

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

【讨论】：

【解决方案9】：

.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');
}

【讨论】：

有效，但没有响应:(
@SublymeRick 使用媒体查询并更改所有转换：scale()

【解决方案10】：

这是我的解决方法：

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; }

【讨论】：

【解决方案11】：

现在，您可以使用以下代码（由 google 提供）
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

【讨论】：

【解决方案12】：

已经很晚了，但如果仍然遇到问题，只是想帮助其他人。我在这里找到了不错的 JS 解决方案：https://github.com/google/recaptcha/issues/61#issuecomment-376484690

这里是使用 jQuery 的 JavaScript 代码：

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 302) {
        var scale = width / 302;
        $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('transform-origin', '0 0');
        $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
    }
});

IMP 注意：它将支持所有设备，宽度为 320px 以上和以下。

【讨论】：

【解决方案13】：

不幸的是，以上都没有奏效。我终于可以使用以下东西来做到这一点：此解决方案 100% 有效（根据您的需要进行调整）

.g-recaptcha-wrapper {
    position: relative;
    border: 1px solid #ededed;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 0;
    #topHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
    #rightHider {
        position: absolute;
        top: 0;
        left: 295px;
        height: 100% !important;
        width: 15px;
        background-color: #f9f9f9;
    }
    #leftHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        width: 2px;
        background-color: #f9f9f9;
    }
    #bottomHider {
        position: absolute;
        bottom: 1px;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
}

<div class="g-recaptcha-wrapper">
  <re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
  <div id="topHider"></div>
  <div id="rightHider"></div>
  <div id="bottomHider"></div>
  <div id="leftHider"></div>
</div>

结果

【讨论】：