Изменить новую ширину Google Recaptcha (v2)

Ответ 1

Вот работа, но не всегда отличная, в зависимости от того, насколько вы ее масштабируете. Объяснение можно найти здесь: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

UPDATE: Google добавила поддержку меньшего размера с помощью параметра. Взгляните на документы - https://developers.google.com/recaptcha/docs/display#render_param

Ответ 2

Для большей совместимости:

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

Ответ 3

Нет, в настоящее время вы не можете. Это было возможно только со старой recaptcha, но я уверен, что вы сможете это сделать в будущем.

У меня нет решения, кроме предложения. У меня была та же проблема, поэтому я сосредоточил recaptcha div (margin: 0 auto;display: table), я думаю, что он выглядит намного лучше, чем выровненный слева div.

Ответ 4

Немного поздно, но у меня есть простой способ:

Просто добавьте этот код в свой класс "g-recaptcha":

width: desired_width;

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

Ответ 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>

Ссылка

Ответ 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');
}

Ответ 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';
     }
}

Ответ 8

Это моя работа:

1) Добавьте обертку div в div recaptcha.

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

Ответ 9

Теперь вы можете использовать приведенный ниже код (от Google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

Ответ 10

Я нашел следующие лучшие способы изменить размеры Google Recaptchas

Вариант 1. Вы можете изменить размер Google ReCaptcha с помощью встроенного стиля.

Самый первый способ изменить размеры Google Recapture с помощью встроенного стиля. Встроенные стили - это стили CSS, которые применяются к одному элементу непосредственно в HTML страницы с помощью атрибута style. Вот пример, который показывает вам, как правильно оформить 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>

Ответ 11

Вы можете использовать параметр из reCaptcha. По умолчанию он использует normal значение для data-size Вам просто нужно использовать compact чтобы разместить его на небольших устройствах или в некотором роде с разметкой небольшой ширины.

пример:

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

Ответ 12

Было уже поздно, но я просто хочу помочь другим, если все еще сталкиваюсь с проблемой. Я нашел хорошее решение JS здесь: https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Вот код JavaScript, использующий для этого jQuery:

$(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 пикселей и выше.