새 Google Recaptcha (v2) 너비 변경

새 Google Recaptcha (v2) 너비 변경

---

https://www.google.com/recaptcha/intro/index.html에 나열된대로 새로운 Google recaptcha를 구현하기 시작했습니다.

그러나 새로운 방법은 페이지에 포함되지 않고 iFrame에 포함되어있어 CSS를 적용하기가 더 어려워집니다.

그러나 우리는 400px 너비의 양식이 있으므로 recaptcha를 동일한 너비로 사용하고 싶습니다.

현재처럼 보이지만 나머지와 동일하게하고 싶습니다.

아무도 이것을 수행하는 방법을 아직 알고 있습니까?

감사

---

여기에 해결 방법이 있지만 확장 정도에 따라 항상 좋은 것은 아닙니다. 설명은 여기에서 찾을 수 있습니다 : https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

업데이트 : Google은 매개 변수를 통해 더 작은 크기에 대한 지원을 추가했습니다. 문서보기-https: //developers.google.com/recaptcha/docs/display#render_param

---

더 많은 호환성을 위해 :

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

---

아니요, 현재는 할 수 없습니다. 예전 리캅 차로 만 가능했지만 앞으로도 가능할 거라고 확신합니다.

나는 해결책이 없지만 제안이 있습니다. 나는 같은 문제가 있었기 때문에 recaptcha div ( margin: 0 auto;display: table)를 중앙에 배치했으며 왼쪽 정렬 div보다 훨씬 나아 보인다고 생각합니다.

---

조금 늦었지만 쉬운 해결 방법이 있습니다.

다음 코드를 "g-recaptcha"클래스에 추가하기 만하면됩니다.

width: desired_width;

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

---

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

---

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

---

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

---

이것은 내 작업입니다.

1) recaptcha div에 래퍼 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; }

---

이제 아래 코드를 사용할 수 있습니다 (Google 제공)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

---

Google recaptchas의 크기를 조정하는 가장 좋은 방법을 찾았습니다.

옵션 1 : 인라인 스타일을 사용하여 Google ReCaptcha의 크기를 조정할 수 있습니다.

인라인 스타일을 사용하여 Google 리 캡처의 크기를 조정하는 첫 번째 방법입니다. 인라인 스타일은 style 속성을 사용하여 페이지의 HTML에서 직접 하나의 요소에 적용되는 CSS 스타일입니다. 다음은 인라인 스타일을 사용하여 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 : 페이지에 다음 스타일을 추가합니다 (내부 스타일 시트).

Secondly, you can put style for ReCaptcha into the page between and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.

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

Option 3: Resize google ReCaptcha by using an external stylesheet.

Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .

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

---

You can use parameter from reCaptcha. By default it uses normal value on data-size, You just have to use compact to fit this on small devices or some-kind small width layouts.

example:

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

---

늦었지만 여전히 문제가 발생하면 다른 사람들을 돕고 싶습니다. 여기에서 멋진 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 너비 이상의 모든 장치를 지원합니다.

참고 URL : https://stackoverflow.com/questions/27691411/change-new-google-recaptcha-v2-width