更改新的 Google Recaptcha (v2)宽度

No, currently you can not. It was only possible with the old recaptcha, but I'm sure you will be able to do that in the future.

I have no solution but a suggestion. I had the same problem, so I centered the recaptcha div (margin: 0 auto;display: table), I think it looks much better than a left-aligned div.

A bit late but I've got an easy workaround:

Just add this code to your "g-recaptcha" class:

width: desired_width;


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

Here is a work around but not always a great one, depending on how much you scale it. Explanation can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

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

UPDATE: Google has added support for a smaller size via a parameter. Have a look at the docs - https://developers.google.com/recaptcha/docs/display#render_param

For more compatibility:

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

For the new version of noCaptcha Recaptcha the following works for me:

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

I have this function in the document ready event so that the reCaptcha is dynamically sized. Anyone should be able to drop this in place and go.

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

This is my work around:

1) Add a wrapper div to the recaptcha div.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Add javascript/jquery code.

$(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) Optional: add some styling if needed.

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }

Now, You can use below code (by google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

I have found following best ways to resize google recaptchas

Option 1: You can resize google ReCaptcha by using inline style.

A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.

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

Option 2: By putting the following style in your page (Internal Style Sheet).

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>

Reference from the blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

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>

It's been late, but just want to help others if still facing an issue. I found nice JS solution here : https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Here is JavaScript code using jQuery to do so:

$(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 Note : It will support All Devices, above and bellow 320px width as well.

unfortunately none of the above worked. I finally could do it using the following stuffs: This solution works 100% (adapt it to your need)

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

Result

Class .g-recaptcha is not scaling the challenge popup. Google does not assign class to the parent of the iframe div. Hence targeting the general div with child iframe will work for both recaptcha and the challenge popup.

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

It will scale other iframes on the page as well therefore only use this if you don't have any other iframes.