css - 没有图像剪切的响应式重新验证

Question

我正在尝试创建响应式验证码。我在互联网上找到了这个很好的例子。我试过了，它工作正常，但问题是当我将我的 chrome 浏览器调整到最小尺寸时，文字会被切断，就像在 iPhone 上一样。我在想，有没有可能在不删减文字的情况下让文本仍然可读？

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

这应该可以解决图像问题。