如何做出響應式圖像恢復

我爲Bootstrap 3設計了恢復程序。現在我需要在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

來源

2014-10-09 ಠ_ಠ

替代方法：[不]（http://www.karlgroves.com/2012/04/03/captcha-less-security/）因爲]（http://www.karlgroves.com/2013/02/09/list-of-resources-breaking-captcha/），卡爾格羅夫斯的禮貌比我的評論更有建設性，我希望^^ – FelipeAls 2014-10-09 07:41:33

好文檔！你是對的。我認爲更好的設計，我把圖像recaptcha在'div'的中心。 – 2014-10-09 07:44:54

嘗試驗證碼容器設置爲100％，以及

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

小提琴：Here

來源

2014-10-09 07:45:52

使用該代碼在標題部分。

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

沒有我們無法響應的設計。

，並使用此代碼也：

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

來源

2014-10-09 07:46:51 Websolutionexpert24

試試這個，它工作得很好，這是你的UPDATED FIDDLE

只需添加該代碼

CSS

#recaptcha_image { 
    width: 100% !important; 
}

現在它將作爲響應爲Recaptcha。

來源

2014-10-09 07:52:09 KesaVan

您應該添加一個最大寬度，否則它將拉伸整個圖像，並且如果屏幕很大，將會使其不可讀。
CSS：

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

DEMO

來源

2014-10-09 08:12:43 Nick

如何做出響應式圖像恢復

回答

相關問題