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

Вёрстка Просмотров: 302
Оценить код:

Комментарии

Ваш комментарий будет первым.
Войдите, чтобы оставить комментарий.