В продолжении статьи «как интегрировать ReCAPTCHA на сайт» возникает другой вопрос – как изменить ее размер?
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты формы. Исправить это можно следующими способами:
Включить его можно добавлением атрибута data-size="compact", размер становится 164x144px.
<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-size="compact" class="g-recaptcha" data-sitekey="xxx"></div>Уменьшить размер капчи можно CSS-свойством transform:
<script src="https://www.google.com/recaptcha/api.js"></script>
<div style="transform:scale(0.8); transform-origin:0;" class="g-recaptcha" data-sitekey="xxx"></div>Ниже приведена таблица значений transform и ширины капчи:
| CSS | Ширина |
|---|---|
transform: scale(0.7); |
212px |
transform: scale(0.75); |
228px |
transform: scale(0.8); |
243px |
transform: scale(0.85); |
258px |
transform: scale(0.9); |
273px |
transform: scale(0.95); |
288px |
Включается атрибутом data-theme="dark".
<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-theme="dark" class="g-recaptcha" data-sitekey="xxx"></div>
