रिकैप्चा निश्चित छवि आकार

Question

आकार 300x57 आकार में रिकैप्चा छवि क्यों तय की गई है? यहां तक ​​कि div को अनुकूलित करते समय जहां छवि इंजेक्शन दी जाती है, div की चौड़ाई और ऊंचाई ओवरराइड होती है और 300x57 पर सेट होती है। बेशक छवि को प्रस्तुत करने के बाद फिर से आकार दिया जा सकता है, लेकिन छवि डेवलपर्स को छवि को उत्पन्न करने के लिए कोई विकल्प क्यों नहीं है।

http://code.google.com/apis/recaptcha/docs/customization.html

reCAPTCHA उपयोगकर्ता के लिए कैप्चा प्रदर्शित करने के लिए निम्न आईडी के साथ HTML तत्वों की उपस्थिति पर निर्भर करेगा: आईडी recaptcha_image साथ एक खाली div। यह वह जगह है जहां वास्तविक छवि रखी जाएगी। div 300x57 पिक्सल हो जाएगा

धन्यवाद

Answer 1

#recaptcha_image img { 
    width: 200px !important; 
    height: 38px !important; 
} 

Answer 2

आप इनलाइन सीएसएस जोड़ने! एक सीएसएस नियम के पीछे महत्वपूर्ण ओवरराइड कर सकते हैं, एक बाहरी फ़ाइल में भी।

Answer 3

सीएसएस के साथ पूर्ण अनुकूलन, demo

<form method="POST" action=""> 



<script type="text/javascript"> 
           var RecaptchaOptions = { 
            tabindex: 1, 
            theme: 'custom', 
            custom_theme_widget: 'recaptcha_widget' 
           }; 
          </script> 
          <div id="recaptcha_widget" style="display:none"><div id="recaptcha_image"></div> 
           <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect, please try again</div> 
           <span class="recaptcha_only_if_image">Enter the words above:</span> 
           <span class="recaptcha_only_if_audio">Type what you hear:</span> 
           <input type="text" id="recaptcha_response_field" name="recaptcha_response_field"> 
           <div class="get_another_captcha"><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div> 
           <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type(&#39;audio&#39;)">Get an audio CAPTCHA</a></div> 
           <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type(&#39;image&#39;)">Get an image CAPTCHA</a></div> 
           <div><a href="javascript:Recaptcha.showhelp()">Help</a></div> 
           <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=YourAPI"></script> 
           <noscript><iframe src="http://www.google.com/recaptcha/api/noscript?k=YourAPI" height="300" width="500" frameborder="0"></iframe><br> 
           <textarea name="recaptcha_challenge_field" rows="3" cols="40"> 
           </textarea> 
           <input type="hidden" name="recaptcha_response_field" value="manual_challenge"></noscript></div> 
          <script type="text/javascript"> 
           window.onload = function() { 
            Recaptcha.focus_response_field(); 
           } 
          </script> 
          <table cellspacing="0" cellpadding="4" border="0" style="font-family: Helvetica, sans-serif; color: #000000; font-size: 12px;"><tr><td><div><input type="submit" name="Button1" value="Submit"></div></td></tr></table></form> 

Answer 4

यह मेरे लिए काम किया है और प्रभावी ढंग से पूरे नियंत्रण की चौड़ाई न केवल आंतरिक छवि

#recaptcha_area 
    { 
     width: 250px !important; 
     height: 38px !important; 
    } 

Answer 5

समाधान नए के लिए काम बदल गूगल रिकैप्चा (https://www.google.com/recaptcha/)

<!--adjust to your needs --> 
<div class="g-recaptcha" data-sitekey="your_sitekey" style="transform:scale(.8); margin:0 -30px"> 

Answer 6

मेरे लिए निम्न कार्य noCaptcha रीकैप्चा के नए संस्करण के लिए:

<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX"  
style="transform:scale(0.77);transform-origin:0;-webkit-transform:scale(0.77); 
transform:scale(0.77);-webkit-transform-origin:0;transform-origin:0 0;"></div> 

आप पैमाने पर केवल अभी भी यह div के मूल आकार लेता है। लेकिन उपरोक्त समाधान रिक्त स्थान मुद्दे को हल करता है।

Ref