title: how do responsive recaptcha images
body: <p>I designed recaptcha for Bootstrap 3. now i need to show recaptcha image in <code>100%</code> for responsive theme.</p>
  
  <p>HTML : </p>
  
  <pre><code>    &lt;div class="form-group"&gt;
      &lt;div class="captcha"&gt;
          &lt;div id="recaptcha_image"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="recaptcha_only_if_image"&gt;Enter the words above&lt;/div&gt;
      &lt;div class="recaptcha_only_if_audio"&gt;Enter the numbers you hear&lt;/div&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="form-control input-lg" /&gt; &lt;a class="btn btn-default input-group-addon" href="javascript:Recaptcha.reload()"&gt;&lt;span class="icon-refresh"&gt;&lt;/span&gt;&lt;/a&gt;
   &lt;a class="btn btn-default input-group-addon recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"&gt;&lt;span class="icon-volume-up"&gt;&lt;/span&gt;&lt;/a&gt;
   &lt;a class="btn btn-default input-group-addon recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"&gt;&lt;span class="icon-picture"&gt;&lt;/span&gt;&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;script&gt;
          var RecaptchaOptions = {
              theme: 'custom',
              custom_theme_widget: 'recaptcha_widget'
          };
      &lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"&gt;&lt;/script&gt;
      &lt;noscript&gt;
          &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;
          &lt;br/&gt;
          &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
          &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge" /&gt;
      &lt;/noscript&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#recaptcha_image img {
      width:100%
  }
  </code></pre>
  
  <p>how do resize images recaptcha for responsive design?!</p>
  
  <p>demo : <a href="http://jsfiddle.net/fj4mn2cL/1/" rel="nofollow">FIDDLE</a></p>