Вёрстка: Адаптация ширины виджета Google reCAPTCHA v2
Ширина виджета 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+
Комментарии