我们刚刚开始实施列出的新的Google Recaptcha,网址为https://www.google.com/recaptcha/intro/index.html
但是,新方法似乎包含在iFrame中,而不是嵌入到页面中,因此使CSS的应用更加困难。
但是,我们的表单宽度为400像素,因此希望将Recaptcha设置为相同的宽度。
目前看起来像,但是我们希望其他地方都一样。
有人知道怎么做吗?
谢谢
我们刚刚开始实施列出的新的Google Recaptcha,网址为https://www.google.com/recaptcha/intro/index.html
但是,新方法似乎包含在iFrame中,而不是嵌入到页面中,因此使CSS的应用更加困难。
但是,我们的表单宽度为400像素,因此希望将Recaptcha设置为相同的宽度。
目前看起来像,但是我们希望其他地方都一样。
有人知道怎么做吗?
谢谢
Answers:
这是一个变通方法,但不一定总能奏效,具体取决于您扩展的规模。可以在这里找到说明: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
data-size="compact"
对我来说并不紧凑。猜猜我们将坚持使用变换进行缩放
不,目前您不能。只有使用旧的Recaptcha才有可能,但是我相信您将来将能够做到这一点。
除了解决方案,我没有其他建议。我遇到了同样的问题,所以我将recaptcha div(margin: 0 auto;display: table
)居中,我认为它看起来比左对齐的div好得多。
为了获得更多兼容性:
-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;
-moz-
或-o-
不需要。
我发现以下最佳方法来调整Google Recaptchas的大小
选项1:您可以使用嵌入式样式来调整google ReCaptcha的大小。
通过使用内联样式来调整Google recapture大小的第一种方法。内联样式是CSS样式,使用style属性直接应用于页面HTML中的一个元素。这是向您展示如何使用内联样式来设置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>
来自博客的参考: https : //www.scratchcode.io/how-to-resize-the-google-recaptcha/
.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)将包装器div添加到recaptcha 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;
}
已经很晚了,但是如果仍然遇到问题,只想帮助别人。我在这里找到了不错的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以下。
不幸的是,以上方法均无效。我最终可以使用以下材料来做到这一点:此解决方案可以100%工作(根据您的需要进行调整)
.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>