没有CAPTCHA reCAPTCHA调整大小 [英] No CAPTCHA reCAPTCHA Resizing

问题描述

您好，我刚刚在我的网站上添加了Google的无CAPTCHA reCAPTCHA ，我遇到了一个小问题。它不适合我的移动网站，这是一个巨大的问题。我已尝试过以下操作：

  HTML 
 
< div id =captchadisplay> 
< div class =g-recaptchadata-sitekey =???>< / div> 
< / div> 
 
 CSS 
 
 #captchadisplay {
 width：50％！important; 
} 
  

和

  CSS 
 
 .g-recaptcha {
 width：50％; 
} 
  

但我似乎不能缩减我的移动网站。有任何想法吗？ ：）

解决方案

通过使用CSS transform属性，你可以通过改变reCAPTCHA的整个比例来改变宽度。 p>

通过只添加两个内联样式，您可以使reCAPTCHA在移动设备上很好地匹配：

 < div class =g-recaptcha
 data-theme =light
 data-sitekey =XXXXXXXXXXXXX
 style =transform：scale 0.77）; transform-origin：0 0> 
< / div>`
  

更多细节可以在这里找到：https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha /

Hi I just added Google's No CAPTCHA reCAPTCHA to 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:

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 using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:

<div class="g-recaptcha" 
     data-theme="light" 
     data-sitekey="XXXXXXXXXXXXX" 
     style="transform:scale(0.77);transform-origin:0 0">
</div>`

More details can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

这篇关于没有CAPTCHA reCAPTCHA调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！