Html 没有验证码 reCAPTCHA 调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28594842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No CAPTCHA reCAPTCHA Resizing
提问by michael jones
Hi I just added Google's No CAPTCHA reCAPTCHAto my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is a HUGE issue. I have tried everything such as:
嗨，我刚刚在我的网站上添加了 Google 的No CAPTCHA reCAPTCHA，但我遇到了一个小问题。它不适合我的移动网站，这是一个巨大的问题。我已经尝试了一切，例如：
HTML
<div id="captchadisplay">
<div class="g-recaptcha" data-sitekey="???"></div>
</div>
CSS
#captchadisplay {
width: 50% !important;
}
and
和
CSS
.g-recaptcha {
width: 50%;
}
Yet I can not seem to shrink it down for my mobile website. Any ideas? :)
然而，我似乎无法为我的移动网站缩小它。有任何想法吗？:)
回答by Geek Goddess
By using the CSS transformproperty you can achieve changing the width by changing the entire scaleof the reCAPTCHA.
通过使用 CSS变换属性，您可以通过更改reCAPTCHA的整个比例来更改宽度。
By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:
通过添加两种内联样式，您可以使 reCAPTCHA 非常适合您的移动设备：
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
更多细节可以在我的网站上找到：https: //www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
回答by Security Aficionado
I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.
我成功实施了Geek Goddess的解决方案。它的主要问题是它可能不适用于所有浏览器。然而，现在谷歌提供了一个简单的解决方案。
With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.
在 reCAPTCHA 2.0 版中，小部件的显示有了新的规则，谷歌添加了改变其呈现方式的标签属性。
The tag data-sizecan take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.
标签data-size可以采用 的值"normal"，这是默认值，和"compact"，适合移动设备屏幕。这就是紧凑型小部件的样子。
It is not the best looking widget, but it fits with less work than the other solutions.
它不是最好看的小部件，但与其他解决方案相比，它的工作量更少。
For more attributes, check Google's reCAPTCHA v2.0 documentation
更多属性，查看谷歌的 reCAPTCHA v2.0 文档
回答by AjaxLeung
I have been using some JQuery, since putting transform(0.77)in the style attribute wasn't a truly responsive solution.
我一直在使用一些 JQuery，因为放入transform(0.77)style 属性并不是一个真正的响应式解决方案。
I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:
我在我的 CSS 中添加了这个媒体查询，最大宽度是 ReCaptcha 框一旦通过就被认为太大的阈值：
@media(max-width: 390px) {
.g-recaptcha {
margin: 1px;
}
}
I then add this JQuery:
然后我添加这个 JQuery：
$(window).resize(function() {
var recaptcha = $(".g-recaptcha");
if(recaptcha.css('margin') == '1px') {
var newScaleFactor = recaptcha.parent().innerWidth() / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
}
else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
}
});
The 304 I use is the default width of the ReCaptcha box if unstyled.
如果没有样式，我使用的 304 是 ReCaptcha 框的默认宽度。
Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.
现在，无论父容器变得多么小，ReCaptcha 都会适当地缩小，并且它的行为就像它在原始宽度上具有最大宽度一样。
Note that the media query is simply a mechanism to detect a screen size change.
请注意，媒体查询只是一种检测屏幕尺寸变化的机制。
回答by L_7337
According to the documentationfrom Google shows a data-sizeattribute which can be set and this worked for me.
根据谷歌的文档显示了一个data-size可以设置的属性，这对我有用。
<div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
But, the answer from @GeekGoddess provides a little more flexibility in sizing.
但是，@GeekGoddess 的答案在调整大小方面提供了更大的灵活性。
回答by Felix
For me the compactmode implementation of Google re-captcha 2.0 is just lame. It looks ugly.
对我来说，Google re-captcha 2.0的紧凑模式实现只是蹩脚的。它看起来很丑。
Just expanding from "Geek Goddess" solution.
只是从“Geek Goddess”解决方案扩展而来。
You can do the following:
您可以执行以下操作：
<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>
That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransformis for IE <= 8).
这将在几乎所有浏览器 IE、Chrome、FF、Opera 上调整大小（DXImageTransform适用于 IE <= 8）。
Further more we can make it responsive by combining this transform scalewith CSS max-width.
此外，我们可以通过将此变换比例与 CSS max-width相结合来使其具有响应性。
It's not the perfect way, but until we get the proper responsive fix from Google.
这不是完美的方式，但直到我们从谷歌获得适当的响应修复。
回答by phoenix
Here's my spin on the resize:
这是我对调整大小的看法：
<script>
function resizeReCaptcha() {
var width = $( ".g-recaptcha" ).parent().width();
if (width < 302) {
var scale = width / 302;
} else {
var scale = 1;
}
$( ".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');
};
$( document ).ready(function() {
$( window ).on('resize', function() {
resizeReCaptcha();
});
resizeReCaptcha();
});
</script>
回答by Cosmin
For who might be interested, I changed a little AjaxLeungsolution and came up with this:
对于可能感兴趣的人，我更改了一个小AjaxLeung解决方案并提出了这个：
function resizeReCaptcha() {
if ($(".g-recaptcha").length) {
var recaptcha = $(".g-recaptcha");
recaptcha.parent().addClass('col-xs-12 padding0');
var innerWidth = recaptcha.parent().innerWidth();
if (innerWidth < 304) {
var newScaleFactor = innerWidth / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
} else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('-webkit-transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
}
}
}
$(window).resize(function() {
resizeReCaptcha();
});
$(document).ready(function () {
resizeReCaptcha();
});
回答by icetique
If you don't like the CSS solution, you may try the JS.
如果你不喜欢 CSS 解决方案，你可以试试 JS。
The idea is to dynamically switch between compact and normal mode of the recaptcha plugin.
这个想法是在recaptcha插件的紧凑和正常模式之间动态切换。
I will provide an example with jQuery onboard, but it shouldn't be much to port it to pure JS.
我将提供一个带有 jQuery 板载的示例，但将其移植到纯 JS 应该不会太多。
I assume you have following HTML code on the site.
我假设您在网站上有以下 HTML 代码。
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
Firstly you need to load gRecaptcha 2 explicitly and provide onloadcallback:
首先，您需要显式加载 gRecaptcha 2 并提供onload回调：
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
Next, create your callback function which will also be your javascript media query.
接下来，创建您的回调函数，它也将是您的 javascript 媒体查询。
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
The last thing is to render the recaptcha widget.
最后一件事是呈现recaptcha 小部件。
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
You may wonder why I empty the div and clone all the g-recaptcha content. It's because gRecaptcha 2 wouldn't let you render second time to the same element. There could be a better way, but it's all I found for now.
您可能想知道为什么我清空 div 并克隆所有 g-recaptcha 内容。这是因为 gRecaptcha 2 不允许您对同一元素进行第二次渲染。可能有更好的方法，但这是我现在找到的全部。
回答by Sumit Nayak
Hope this works for you.
希望这对你有用。
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0 0"></div>
Just add style="transform:scale(0.77);transform-origin:0 0"
只需添加 style="transform:scale(0.77);transform-origin:0 0"
回答by Amy Brown Cole
Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden;to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.
不幸的是，NoCaptcha 使用 iframe，因此您最多可以控制高度/宽度并用于overflow:hidden;切断多余的部分。为了获得最佳可用性，我不建议切断超过几个像素的验证码。
Example:
例子：
.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
