我們剛剛開始實(shí)施新的谷歌recaptcha上市https://www.google.com/recaptcha/intro/index.html

然而，新方法似乎包含在iFrame中，而不是嵌入到頁(yè)面中，這使得應(yīng)用CSS更加困難。

然而，我們已經(jīng)得到了400像素寬的表單，所以希望recaptcha也有同樣的寬度。

目前看起來(lái)是這樣，但是我們希望它和其他的一樣。

有人知道怎么做嗎？

謝謝

這里有一個(gè)工作，但并不總是一個(gè)偉大的，這取決于你有多大的規(guī)模。解釋可以在這里找到:https://www . geek女神. com/how-to-resize-the-Google-nocaptcha-recaptcha/

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

更新: Google通過一個(gè)參數(shù)增加了對(duì)小尺寸的支持。看看docs-https://developers . Google . com/recaptcha/docs/display # render _ param

不，目前你不能。這只可能與舊的recaptcha，但我相信你將能夠在未來(lái)這樣做。

我沒有辦法，只有一個(gè)建議。我也有同樣的問題，所以我把recaptcha div放在中間 (邊距:0自動(dòng)；display: table)，我覺得比左對(duì)齊的div好看多了。

我發(fā)現(xiàn)了以下調(diào)整google recaptchas大小的最佳方法

選項(xiàng)1:您可以使用inline style來(lái)調(diào)整google ReCaptcha的大小。

使用內(nèi)嵌樣式調(diào)整Google recreat大小的第一個(gè)方法。內(nèi)聯(lián)樣式是直接在頁(yè)面的HTML中使用style屬性應(yīng)用于一個(gè)元素的CSS樣式。這個(gè)例子向你展示了如何使用inline style來(lái)設(shè)計(jì)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>

選項(xiàng)2:在頁(yè)面中放置以下樣式(內(nèi)部樣式表)。

其次，您可以將ReCaptcha的樣式放入到頁(yè)面中的和之間。內(nèi)部樣式表是HTML頁(yè)面上包含樣式定義的部分。內(nèi)部樣式表是通過使用文檔區(qū)域內(nèi)的標(biāo)簽來(lái)定義的。這個(gè)例子展示了如何使用外部樣式表來(lái)設(shè)計(jì)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>

選項(xiàng)3:使用外部樣式表調(diào)整google ReCaptcha的大小。

創(chuàng)建一個(gè)單獨(dú)的文件，命名為style.css，并在頁(yè)面的元素之間添加這個(gè)文件鏈接。為了前任。。

<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 . scratch code . io/how-to-resize-the-Google-recaptcha/

為了獲得更高的兼容性:

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

有點(diǎn)晚了，但我有一個(gè)簡(jiǎn)單的解決方法:

只需將這段代碼添加到您的“g-recaptcha”類中:

width: desired_width;

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

對(duì)于noCaptcha Recaptcha的新版本，以下內(nèi)容適合我:

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

裁判員

我在文檔就緒事件中使用了這個(gè)函數(shù)，以便動(dòng)態(tài)調(diào)整reCaptcha的大小。任何人都應(yīng)該可以把它放在適當(dāng)?shù)奈恢萌缓箅x開。

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

您可以使用reCaptcha中參數(shù)。默認(rèn)情況下，它使用正常的數(shù)據(jù)大小值，你只需要使用壓縮來(lái)適應(yīng)小型設(shè)備或某種小寬度的布局。

示例:

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

這是我的工作:

1)將包裝器div添加到recaptcha div。

& ltdiv id="recaptcha-wrapper " >& ltdiv class = " g-recaptcha " data-site key = " ... "& gt& lt/div & gt；& lt/div & gt；

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-包裝器{ 文本對(duì)齊:居中； 邊距-底部:15px }

。g-recaptcha { 顯示:內(nèi)嵌-塊； }

現(xiàn)在，你可以使用下面的代碼(由谷歌) & ltdiv class = " g-recaptcha " data-site key = " & lt；你的>data-size="compact " >& lt/div & gt；

已經(jīng)很晚了，但如果仍然面臨問題，我只想幫助其他人。我在這里找到了不錯(cuò)的JS解決方案:https://github . com/Google/recaptcha/issues/61 # issue comment-376484690

下面是使用jQuery實(shí)現(xiàn)這一點(diǎn)的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注意:它將支持320像素以上和以下的所有設(shè)備。

不幸的是，以上方法都不起作用。我終于可以用下面的東西做到了: 該解決方案100%有效(根據(jù)您的需求進(jìn)行調(diào)整)

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

班級(jí)。g-recaptcha不會(huì)縮放挑戰(zhàn)彈出窗口。Google不會(huì)將類分配給iframe div的父類。因此，針對(duì)帶有子iframe的一般div將對(duì)recaptcha和挑戰(zhàn)彈出窗口都有效。

div iframe {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}

它還會(huì)縮放頁(yè)面上的其他iframe，因此只有在沒有其他iframe的情況下才使用它。