如何调整Google Invisible reCAPTCHA V2图片选择弹窗尺寸

我完全懂你的困扰——网上搜出来的方案几乎都盯着那个"I'm Not A Robot"小灰框，但真正让你头疼的是验证时弹出的图片选择窗口，不管是手机还是笔记本上都显得太大，试了常规方法根本没用。别担心，这个弹窗本质是Google动态加载的iframe，我们可以通过针对性的CSS调整它的尺寸，而且确实有不少网站这么做过，下面是可行的具体方案：

核心思路 #

reCAPTCHA的图片弹窗会带有特定的类名.grecaptcha-bubble，我们可以通过CSS选择器定位到它，用transform: scale()来缩放弹窗，同时调整位置避免缩放后弹窗偏移到视口外，还要处理移动端的适配问题。

具体实现步骤 #

1. 添加自定义CSS代码 #

把这段CSS放到你的样式文件里，你可以根据实际需求调整缩放比例（比如0.8就是缩小到原尺寸的80%）：

/* 隐藏弹窗默认箭头，缩放后箭头位置会错乱 */
div.grecaptcha-bubble-arrow,
div.grecaptcha-bubble-arrow:before {
    display: none !important;
}

/* 调整弹窗尺寸与位置，适配你设置的badge位置（bottomright） */
.grecaptcha-bubble {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important; /* 从右下角开始缩放 */
    bottom: 60px !important; /* 拉开和右下角badge的距离 */
    right: 20px !important;
    max-width: 90vw !important; /* 限制最大宽度，避免溢出视口 */
}

/* 移动端专属适配，让弹窗居中显示更友好 */
@media (max-width: 768px) {
    .grecaptcha-bubble {
        transform: translateX(50%) scale(0.7) !important;
        transform-origin: bottom center !important;
        right: 50% !important;
        bottom: 80px !important;
    }
}

2. 关键注意点 #

• 缩放比例建议控制在0.7-0.9之间，太小会导致验证图片模糊，影响用户体验；
• transform-origin要和你代码里设置的badge位置对应（你用的是bottomright，所以默认从右下角缩放），移动端改成居中更符合用户习惯；
• 如果你的CSS优先级不够，可以在选择器前加上表单容器的类名（比如.news-container），确保覆盖Google的默认样式：

  .news-container .grecaptcha-bubble {
      /* 样式代码 */
  }
  

3. 为什么常规方法无效？ #

因为这个图片弹窗是一个独立的iframe，和你页面里的.recaptcha-holder完全不是一个层级，Google还会动态给弹窗添加内联样式，常规的针对holder的样式根本影响不到它，必须直接定位到弹窗自身的类名。

关于你的现有代码 #

你当前的reCAPTCHA渲染逻辑和表单验证流程都是正确的，只需要加入上面的CSS代码，就能解决弹窗尺寸过大的问题了。

内容的提问来源于stack exchange，提问作者cyber_knight