如何更改reCAPTCHA的寬度？

Question

我在我的項目中使用了Google reCAPTCHA 2，並且想爲CAPTCHA設置一個寬度，因爲我的項目應該有響應式設計，但不知道如何做到這一點。

Answer 1

這裏是我使用的一種技術，您可以在其中調整transform屬性並動態獲取比例值。如果您有各種不同的尺寸，這非常棒。如果你只有1或2個表單，最好使用CSS類。請參閱本文以供參考：https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

var timer = setTimeout(function() { 
    /** 
    * We're in a timer b/c something weird happens to the container at load time. 
    * If that does not happen for you, by all means remove the timer. 
    * Container is the recaptcha div 
    * Check if the captcha is bigger than the parent container 
    * If so, scale it down. Be warned, if you scale too much 
    * things get a bit weird. 
    */ 
    var childWidth = container.offsetWidth, 
     parentWidth = container.parentElement.offsetWidth; 

    if (childWidth >= parentWidth) { 
     /* console.log('too big'); */ 
     container.style.transform = 'scale(' + parentWidth/childWidth + ')'; 
     container.style.transformOrigin = '0px 50% 0px'; 
    } 
    clearTimeout(timer); 
}, (60 * 2)); 

UPDATE：谷歌已經增加了通過參數更小尺寸的支持。看一看的文檔 - https://developers.google.com/recaptcha/docs/display#render_param

Answer 2

我的解決辦法：

#recaptcha_widget_div { 
    overflow: visible; 
    transform: scaleX(0.9); 
    margin-left: -15px; 
} 

Answer 3

以下樣式屬性爲我工作。添加到iframe上方的特定div元素。

html #recaptcha_area, html #recaptcha_table { 
transform: scale(0.77); 
-webkit-transform: scale(0.77); 
transform-origin: 0 0; 
-webkit-transform-origin: 0 0; 
}