Ширина виджета reCAPTCHA от Google (Я не робот) обычно составляет 300 пикселей в ширину и может быть сложно изменить её напрямую, поскольку это сторонний сервис, который загружается в iframe. Решение заключается в использовании CSS для масштабирования виджета. Этот метод работает путём применения трансформации к контейнеру reCAPTCHA.
.g-recaptcha {
transform: scale(0.9);
transform-origin: 0 0;
}
Для более точной адаптации сделаем автоматический расчёт коэффициента масштабирования для виджета reCAPTCHA в зависимости от ширины контентной части страницы. Если ширина меньше 300 пикселей (стандартная ширина виджета reCAPTCHA), этот код масштабирует виджет, чтобы он вписался в доступное пространство.
document.addEventListener( 'DOMContentLoaded', function()
{
const contentWidth = document.querySelector( '.content' ).offsetWidth;
# Фиксированная ширина виджета reCAPTCHA
const recaptchaWidth = 300;
# Рассчитываем коэффициент масштабирования
const scaleCoefficient = contentWidth < recaptchaWidth ? contentWidth / recaptchaWidth : 1;
# Применяем масштабирование к виджету reCAPTCHA
const recaptchaElement = document.querySelector( '.g-recaptcha' );
if( recaptchaElement )
{
recaptchaElement.style.transform = 'scale( ' + scaleCoefficient + ' )';
recaptchaElement.style.transformOrigin = '0 0';
}
});
P.S.: reCAPTCHA v2 является устаревшим форматом - используйте версии 3+
Комментарии
0Нашли ошибку или хотите дополнить материал?