Question

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

的新google recaptcha

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

然而，我们的表格宽度为400px，所以希望重新抓住相同的宽度。

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

有人知道怎么做吗？

由于

recaptcha layout example

Answer 1

这是一个解决方案，但并不总是很好，取决于你扩展它的程度。可在此处找到解释：https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

<强>更新谷歌通过参数增加了对较小尺寸的支持。查看文档 - https://developers.google.com/recaptcha/docs/display#render_param

Answer 2

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

我没有解决方案，但有一个建议。我有同样的问题，所以我集中了recaptcha div （margin: 0 auto;display: table），我认为它看起来比左对齐div好多了。

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

Answer 4

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

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

width: desired_width;

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

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>

Ref

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

我在文档就绪事件中有这个功能，因此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

这是我的工作：

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

Answer 9

现在，您可以使用以下代码（通过谷歌）
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

Answer 10

不幸的是，上述方法均无效。我终于可以使用以下材料做到这一点：此解决方案可以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>

结果

Answer 11

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

选项1：您可以使用嵌入式样式来调整google ReCaptcha的大小。

使用内联样式来调整Google重新捕获大小的第一种方法。内联样式是CSS样式，使用style属性直接应用于页面HTML中的一个元素。这是向您展示如何使用内联样式来设置Google reCAPTCHA样式的示例。

<?xml version="1.0" encoding="utf-8"?>    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".IncomingLokalActivity"
tools:showIn="@layout/activity_incoming_lokal"
>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:orientation="vertical"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:gravity="center_horizontal"
>

    <android.support.design.widget.FloatingActionButton
        app:backgroundTint="@android:color/holo_blue_dark"
        android:id="@+id/fabUpload"
        android:layout_width="411dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:srcCompat="@android:drawable/ic_menu_upload"
        android:tint="@android:color/white"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        app:backgroundTint="@android:color/black"
        android:id="@+id/fabGallery"
        android:layout_width="411dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:srcCompat="@android:drawable/ic_menu_gallery"
        android:tint="@android:color/white"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        app:backgroundTint="@android:color/holo_red_light"
        android:id="@+id/fabCamera"
        android:layout_width="411dp"
        android:layout_margin="4dp"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/ic_menu_camera"
        android:tint="@android:color/white"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:background="@color/tealGreen"
        app:backgroundTint="@color/tealGreen"
        android:id="@+id/fabMain"
        android:layout_width="411dp"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        app:srcCompat="@android:drawable/ic_input_add"
        android:tint="@color/white"
        android:layout_margin="4dp"
    />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

选项2：通过在页面中放置以下样式（内部样式表）。

第二，您可以将ReCaptcha的样式放在和之间的页面中。内部样式表是HTML页面上包含样式定义的部分。内部样式表是通过使用文档区域内的标签定义的。这是向您展示如何使用外部样式表为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>

选项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>

Answer 12

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

示例：

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

Answer 13

已经很晚了，但是如果仍然遇到问题，只想帮助别人。我在这里找到了不错的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的宽度。

更改新的Google Recaptcha（v2）宽度

13 个答案: