Question

我正在尝试创建一个响应式recaptcha。我在互联网上找到了这个好例子。我尝试了它并且它可以正常工作，但问题是当我将我的Chrome浏览器调整到最小尺寸时它会被切断。我想知道，是否有可能不削减文字，仍然使文字可读？

<style>
@media (max-width: 444px) {

    .recaptchatable #recaptcha_image {
          margin: 0 !important;
          width: 200px !important;
    }

   .recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell {

          background: none !important;
    }

}
</style>

Answer 1

@media (max-width: 444px) {
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 200px !important;
        float:left !important;
    }
    .recaptchatable #recaptcha_image img {
        max-width:100%;
    }
    .recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell, .recaptchatable .recaptcha_r2_c2 {
        background: none !important;
    }
}

这应解决图像问题。

响应recaptcha没有图像切出

1 个答案: