Question

我为Bootstrap 3设计了recaptcha。现在我需要在100%中显示recaptcha图像以获取响应主题。

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

如何调整图像重新调整以进行响应式设计？！

演示：FIDDLE

Answer 1

尝试将验证码容器设置为100％

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

小提琴：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

如何回应重拍图像

4 个答案: