填充父容器的响应式 Recaptcha
Responsive Recaptcha that fills parent's container
我在我的网站上进行响应式重新验证时遇到问题。
它自己的宽度为 304 像素，在 PC 和更大的智能手机上没问题，但在较小的屏幕上它会被剪裁。
我希望 Recaptcha 在较小的设备上填充 100% 的父容器宽度。
我尝试了几种在互联网上找到的方法，例如：
设置内联样式=”transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0; "> - 它只将 recaptcha 大小更改为其原点的 0.77。我以为它会是父级宽度的 0.77，这就是我要找的。
我尝试添加一些 javascript 并根据屏幕大小更改 recaptcha 大小，但这也不起作用。
在这个网站上，我发现了一个带有 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>
我目前没有 css .g-recaptcha。
这是我正在使用的网站：https://www.poznanprzeprowadzki.pl
如果您有任何其他问题，我有空！ :)
尝试使用 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
下
我在我的网站上进行响应式重新验证时遇到问题。
它自己的宽度为 304 像素，在 PC 和更大的智能手机上没问题，但在较小的屏幕上它会被剪裁。
我希望 Recaptcha 在较小的设备上填充 100% 的父容器宽度。
我尝试了几种在互联网上找到的方法，例如：
设置内联样式=”transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0; "> - 它只将 recaptcha 大小更改为其原点的 0.77。我以为它会是父级宽度的 0.77，这就是我要找的。
我尝试添加一些 javascript 并根据屏幕大小更改 recaptcha 大小，但这也不起作用。
在这个网站上，我发现了一个带有 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>
我目前没有 css .g-recaptcha。
这是我正在使用的网站：https://www.poznanprzeprowadzki.pl
如果您有任何其他问题，我有空！ :)
尝试使用 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
下