CSS не применяется после вставки элемента dom

Question

У меня есть контейнер div с определенной шириной и высотой. Я вставляю изображение в этот div, используя JavaScript. CSS, связанный с классом изображения:

max-height: 100%;
max-width:100%;

Так что мое изображение может занимать как можно больше места в контейнере и сохранять его соотношение. Проблема: при вставке изображение занимает все пространство (ширина и высота 100%) и его соотношение не сохраняется.

Что очень любопытно, так это то, что когда я проверяю изображение, открывающее консоль, если я снимаю флажок css свойство max-height: 100%, а затем проверяю его снова, мое изображение изменяет размер и сохраняет его соотношение. Изменение размера также происходит, когда я нажимаю кнопку, которая меняет значение в DOM в другом месте.

Что я могу сделать, чтобы заставить это "обновление" CSS, возможно, с использованием javascript?

Answer 1

Чтобы ответить на этот вопрос, я нашел проблему и обходной путь: Мой контейнер имел свойство flex: 1 и, следовательно, не имел жестко заданной ширины и высоты. Что я делаю, так это получаю высоту и ширину контейнера после его вставки, а затем применяю эти значения к ширине и высоте CSS. Странно то, что мне пришлось сделать это в функции setTimeout (1 мс), чтобы получить правильную ширину и высоту.

Как я уже сказал, он не идеален, но мое изображение теперь сохраняет свое соотношение.