coding-style - 如何调整recaptcha的大小？

Question

如何调整reCaptcha 的大小？我无法得到它。

Answer 1

选择“自定义”主题，然后您可以将其制作成任何您想要的形状！

Answer 2

调整谷歌recaptcha大小的最佳方法

选项 1：您可以使用内联样式调整 google ReCaptcha 的大小。

通过使用内联样式调整 google recapture 大小的第一种方法。内联样式是使用样式属性直接在页面的 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：通过将以下样式放入您的页面（内部样式表）。

其次，您可以将 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>

Answer 3

我刚刚学会的调整 reCAPTCHA 2.0 大小的一个简单技巧是在 CSS 中使用以下内容：

#recaptchaID {
  -webkit-transform-origin:0 0;
          transform-origin:0 0;
  -webkit-transform:scale(0.68); /* scale recaptcha image to fit */
          transform:scale(0.68);
}

然后，只要将 reCAPTCHA 插入页面或表单即可应用它。