填充父母容器的响应式验证码

Question

在我的网站上制作响应式验证码时遇到问题。

它自己的宽度为 304 像素，在 PC 和更大的智能手机上很好，但在较小的屏幕上它会被剪裁。

我希望 Recaptcha 在较小的设备上填充 100% 的父容器宽度。

我尝试了一些在互联网上找到的方法，例如：

1. 设置内联样式="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"> - 它只会改变重新验证大小到它的原点的 0.77。我认为这将是父母宽度的 0.77，这就是我正在寻找的。​​p>

2. 我尝试添加一些 javascript 并根据屏幕大小更改验证码大小，但这也不起作用。

在这个网站上，我发现了一个带有 recaptcha 的联系表格，它的工作方式完全符合我的要求......： https://gpointonltd.co.uk/contact-us/

这是我的html：

<div class="contact-form">
                <form action="contact.php" method="POST">
                    <h1 class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 10px; padding-bottom: 4px; font-weight: 100; width: 100%; text-align: center;">Formularz kontaktowy</h1>

                    <label class="lang" key="contact-form-name" for="name">Imię</label>
                    <input id="name" class="contact-form-content" type="text" name="name" required>
                    
                    <label class="lang" key="contact-form-email" for="email">E-mail</label>
                    <input id="email" class="contact-form-content" type="email" name="email" required>
                    
                    <label class="lang" key="contact-form-topic" for="topic">Temat</label>
                    <input id="topic" class="contact-form-content" type="text" name="topic" required>
                    
                    <label class="lang" key="contact-form-text" for="message">Dodatkowe informacje</label>
                    <textarea id="message" name="message" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" cols="" rows="10"></textarea>

                    <div class="g-recaptcha" data-theme="light" data-sitekey="xyz" data-size="normal" ></div>
                    
                    <button class="contact-form-content-submit" name="submit" type="submit"><p class="lang" key="contact-form-send" style="margin: 0; padding: 0;">Wyślij</p><img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>  
                </form>

                <div class="contact-form-callnow" style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <p class="lang" key="callnow" id="contact-form-callnow" style="font-family: Open Sans; margin: 0; padding: 14px 0px 4px 0px;">Zadzwoń teraz i umów przeprowadzkę!</p>
                </div>
                <div style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><img src="img/Phone_icon_green.png" alt="Phone icon" style="height: 28px; padding-right: 10px"></a>
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><p style="font-family: Open Sans; margin: 0; padding: 4px 0px 10px 0px; font-size: 20px;">732 739 751</p></a>
                </div>
            </div>
        </div>

我目前没有 .g-recaptcha 的 CSS。

这是我正在使用的网站：https://www.poznanprzeprowadzki.pl

如果您有任何其他问题，我有空！ :)

Answer 1

尝试使用 CSS 和 Javascript：

CSS

.g-recaptcha {
 transform-origin: left top;
 -webkit-transform-origin: left top;
}

Javascript (captchaScale = containerWidth / elementWidth) 使用throttle.js，需要导入(https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js)

    function scaleCaptcha(elementWidth) {
      // Width of the reCAPTCHA element, in pixels
      var reCaptchaWidth = 304;
      // Get the containing element's width
        var containerWidth = $('.contact-form').width();
      
      // Only scale the reCAPTCHA if it won't fit
      // inside the container
      if(reCaptchaWidth > containerWidth) {
        // Calculate the scale
        var captchaScale = containerWidth / reCaptchaWidth;
        // Apply the transformation
        $('.g-recaptcha').css({
          'transform':'scale('+captchaScale+')'
        });
      }
    }
    
    $(function() { 
     
      // Initialize scaling
      scaleCaptcha();
      
      // Update scaling on window resize
      // Uses jQuery throttle plugin to limit strain on the browser
      $(window).resize( $.throttle( 100, scaleCaptcha ) );
      
    });

这段代码必须在throttle.js下