как реагировать recaptcha изображения

Question

Я разработал recaptcha для Bootstrap 3. Теперь мне нужно показать образ recaptcha в 100% для отзывчивой темы.

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% 
} 

как изменить размер изображения ReCaptcha для адаптивного дизайна ?!

демо: FIDDLE

Answer 1

Попробуйте установить искаженным контейнер на 100%, а

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

Fiddle: Here

Answer 2

Используйте этот код в разделе заголовка.

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

Мы не можем реагировать на конструкцию.

И использовать этот код также:

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

Answer 3

Попробуйте это, он отлично работает, вот ваш UPDATED FIDDLE

Просто добавьте этот код

CSS

#recaptcha_image { 
    width: 100% !important; 
} 

Теперь он будет работать как отзывчивый для Recaptcha.

Answer 4

Вы также должны добавить максимальную ширину, иначе она растянет все изображение и сделает его нечитаемым, если экран большой.
CSS:

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

DEMO