how do responsive recaptcha images

Question

I designed recaptcha for Bootstrap 3. now i need to show recaptcha image in 100% for responsive theme.

HTML :

    <div class="form-group">
    <div class="captcha">
        <div id="recaptcha_image"></div>
    </div>
</div>
<div class="form-group">
    <div class="recaptcha_only_if_image">Enter the words above</div>
    <div class="recaptcha_only_if_audio">Enter the numbers you hear</div>
    <div class="input-group">
        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="form-control input-lg" /> <a class="btn btn-default input-group-addon" href="javascript:Recaptcha.reload()"><span class="icon-refresh"></span></a>
 <a class="btn btn-default input-group-addon recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><span class="icon-volume-up"></span></a>
 <a class="btn btn-default input-group-addon recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><span class="icon-picture"></span></a>

    </div>
    <script>
        var RecaptchaOptions = {
            theme: 'custom',
            custom_theme_widget: 'recaptcha_widget'
        };
    </script>
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR" 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>

CSS:

#recaptcha_image img {
    width:100%
}

how do resize images recaptcha for responsive design?!

demo : FIDDLE

Alternative: [don't](http://www.karlgroves.com/2012/04/03/captcha-less-security/) [because](http://www.karlgroves.com/2013/02/09/list-of-resources-breaking-captcha/), courtesy of Karl Groves more constructive than my comment I hope ^^ — FelipeAls, Oct 09 '14 at 07:41
Great Docs!!! you right. i think for better design i put image recaptcha in center of `div`. — ಠ_ಠ, Oct 09 '14 at 07:44

score 1 · Accepted Answer · answered Oct 09 '14 at 07:45

1

Try setting captcha container to 100% as well

.captcha, #recaptcha_image, #recaptcha_image img {
    width:100% !important;
}

Fiddle: Here

answered Oct 09 '14 at 07:45

Luca De Nardi

2,028
10
29

score 0 · Answer 2 · edited Oct 09 '14 at 08:05

0

Use this code in the header section.

<meta name="viewport" content="width=device-width, initial-scale=1">

Without we can't responsive of the design.

And use this code also:

#recaptcha_image img {
    width:100% !important;
}

edited Oct 09 '14 at 08:05

kguest

3,730
3
28
31

answered Oct 09 '14 at 07:46

Websolutionexpert24

56
3

score 0 · Answer 3 · answered Oct 09 '14 at 07:52

0

Try this, It works Fine, Here is your UPDATED FIDDLE

Just add this code

CSS

#recaptcha_image {
    width: 100% !important;
}

Now it will work as responsive for the Recaptcha.

answered Oct 09 '14 at 07:52

KesaVan

1,023
15
30

score 0 · Answer 4 · answered Oct 09 '14 at 08:12

0

You should add a max-width aswell, otherwise it will stretch the entire image and will make it unreadable if the screen is big.
css:

#recaptcha_image img {
    width:100%
}
#recaptcha_image {
    width: 100% ! important;
    max-width:400px;
}

DEMO

answered Oct 09 '14 at 08:12

Nick

2,951
2
24
47

how do responsive recaptcha images

4 Answers4