調整大小Google noCAPTCHA reCAPTCHA 無論嘗試使用CSS還是CSS和javascript,似乎都無法改變驗證碼的外觀,原因它使用的是嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容,事情將變得複雜。 是否有更簡單的方式實現RWD Google noCAPTCHA reCAPTCHA,通過使用CSS
transform屬性,您可以更改**reCAPTCHA的整個比例來實現寬度的更改**。。
transform:scale(0.77);
` ## CSS transform 實現 RWD 在您網站上加載reCAPTCHA外面包覆的區塊,或自己設定
,定義一個
id或
class。如下定義一個
class=g-recaptcha:
“ …
嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容,事情將變得複雜。 是否有更簡單的方式實現RWD Google noCAPTCHA reCAPTCHA,通過使用CSS
transform屬性,您可以更改**reCAPTCHA的整個比例來實現寬度的更改**。。
參考文章:How to resize the Google noCAPTCHA reCAPTCHA 為了使reCAPTCHA與左上角對齊,將其設置
transform-origin為使轉換從左上角開始,使用了
transform-origin: 0 0。(
transform-origin默認設置是從中心開始) ![reCAPTCHA與左上角對齊RWD](https://res.cloudinary.com/citiar/image/upload/v1611202212/ucamc/images/sdfer324324.png) 然後你可以使用
media查詢,**設置不同寬度大小裝置,reCAPTCHA縮放的比例,去適合您的移動設備**。
` @media screen and (max-height: 420px){ .g-recaptcha { transform:scale(0.8); -webkit-transform:scale(0.8); transform-origin:0 0; -webkit-transform-origin:0 0; } } @media screen and (max-height: 320px){ .g-recaptcha { transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0; } }