css - Google Recaptcha 无响应大小

Question

所以我在 english-lesson.16mb.com 开发了一个网站 ，经过努力使用 css 制作注册表以便它可以在所有设备上响应，我把 google recaptcha 放在希望它变得响应，但我面临的事实是 google recaptcha 具有固定大小。

我尝试添加 style="width:50%;" 或任何类似的东西，但它只会改变不可见的东西而不是盒子本身

橙色:样式前不可见事物的实际大小
蓝色:现在

我要问的是，如果我使用较小的屏幕，验证按钮将从 View 中裁剪掉

我既不想放置水平滚动条，也不想放置 overflow-x 或类似的东西，有什么办法可以更改 google recaptcha 的大小吗？

实时预览: english-lesson.16mb.com/register.php

Answer 1

我在 recaptcha v2 中遇到了同样的问题。默认情况下它没有响应。经过一些谷歌搜索后，我可以设法用一些 css hack 来做到这一点。首先请记住，您需要在自动呈现而不是显式呈现中添加验证码。 look here .

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

在样式下面添加css

@media screen and (max-width: 455px){ #rc-imageselect, .g-recaptcha { transform:scale(0.71); -webkit-transform:scale(0.71); transform-origin:0 0; -webkit-transform-origin:0 0; }}