CSS - ширина изображения reCAPTCHA

Question

Мне нужно указать две разные ширины для "#recaptcha_image" Поскольку изображение recatcha помещено в div #recaptcha_image, я добавил в CSS пользовательскую ширину, как показано ниже:

#recaptcha_image img {width: 200px !important; height: 38px !important; }

Поскольку я не могу изменить идентификатор DIV, как я могу указать вторую ширину для #recaptcha_image в том же файле CSS? Я могу использовать только ОДИН CSS-файл, потому что у меня есть общий заголовок, который включает CSS-файл.

Спасибо.

Answer 1

Далее удаляет фиксированные атрибуты из элемента управления ASPX и добавляет пару классов для форматирования.

$(document).bind('pageinit', function () {
    var cell = $('#recaptcha_response_field');
    cell.removeAttr('style');
    cell = $('.recaptcha_image_cell');
    cell.addClass('CaptchaCell');
    cell.removeAttr('width');
    cell = $('#recaptcha_image');
    cell.addClass('CaptchaWidth');
    cell.removeAttr('style');
    cell = $('#recaptcha_image img');
    cell.addClass('CaptchaWidth');
    cell.removeAttr('width');
    cell.removeAttr('height');
    cell.removeAttr('style');
});

Это CSS для уменьшения размера ячеек капчи после применения вышеуказанного.Масштабирование для медиа оставлено для вас как упражнение ...

/* Captcha smallest settings */
.CaptchaCell {
    width: 202px;
}

.CaptchaWidth {
    width: 200px;
    height: 57px;
}
.recaptchatable {
    width: 252px;
}
#recaptcha_response_field {
    width: 200px;
    border: 1px solid #3c3c3c;
}

#recaptcha_tagline {
    display:none;
}
#recaptcha_logo {
    display:none;
}

Answer 2

Вы можете создать класс в CSS с другой шириной:

#recaptcha_image img.newWidth {width: 100px }

Затем вам нужно будет добавить этот класс в элемент в нужное время.

Я знаю, что вы не упомянули JavaScript в этом вопросе, но вы также можете использовать JavaScript для изменения ширины при необходимости, используя element.style.width = '100px';