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

更新：Google已通过参数添加了对较小尺寸的支持。查看文档 - 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;
}

如何改变reCAPTCHA的宽度？

3 个答案: