CSS not applied after dom element insert

Question

I have a div container with specific width and height. I insert an image in this div using javascript. The CSS linked to the image class is

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

So my image can take as much space as it can in the container and keep its ratio. Problem : when inserted, the image takes all space (width and height 100%) and its ratio is not preserved.

What's very curious is that when I inspect the image opening the console, if I uncheck the css property max-height:100% and then check it again, my image resize and keeps its ratio. The resize happens too when I push a button that change a value on the DOM at another place.

What can I do to force this CSS "refresh", using javascript maybe ?

Possible duplicate of [CSS: 100% width or height while keeping aspect ratio?](https://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio) — Serg Chernata, Sep 11 '18 at 13:50

score 0 · Answer 1 · answered Sep 12 '18 at 07:28

To answer this, I have found the problem and a workaround : My container had a flex:1 property and thus didn't have any hard coded width and height. What I do is to get the container height and width after inserted it, and then apply this values to css width and height. What's odd is that I had to do this in a setTimeout function (1ms) to get the correct width and height.

As I said, it's not perfect, but my image now keep its ratio.

CSS not applied after dom element insert

1 Answers1