html - 没有验证码 reCAPTCHA 调整大小

Question

您好，我刚刚将 Google 的No CAPTCHA reCAPTCHA 添加到我的网站，但我遇到了一个小问题。它不适合我的移动网站，这是一个大问题。我已经尝试了一切，例如:

HTML

<div id="captchadisplay">
  <div class="g-recaptcha" data-sitekey="???"></div>
</div>

CSS

#captchadisplay {
  width: 50% !important;
}

和

CSS

.g-recaptcha {
  width: 50%;
}

但我似乎无法为我的移动网站缩小它。有任何想法吗？ :)

Answer 1

通过使用 CSS transform 属性，您可以通过更改整个 scale 来改变宽度验证码。

只需添加两个内联样式，您就可以使 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>

可以在我的网站上找到更多详细信息:https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/