插入 dom 元素后未应用 CSS

Question

我有一个具有特定宽度和高度的 div 容器。我使用 javascript 在此 div 中插入图像。链接到图像类的 CSS 是

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

所以我的图像可以在容器中占用尽可能多的空间并保持其比例。问题：插入时，图像占用所有空间（宽度和高度 100%）并且其比例未保留。

非常奇怪的是，当我打开控制台检查图像时，如果我取消选中 css 属性 max-height:100% 然后再次检查它，我的图像会调整大小并保持其比例。当我按下一个按钮来改变另一个地方的 DOM 上的值时，也会发生调整大小。

我能做些什么来强制这个CSS“刷新”，也许使用javascript？

Answer 1

为了回答这个问题，我发现了问题和解决方法： 我的容器有一个 flex:1 属性，因此没有任何硬编码的宽度和高度。 我所做的是在插入后获取容器的高度和宽度，然后将此值应用于 css 宽度和高度。奇怪的是，我必须在 setTimeout 函数 (1ms) 中执行此操作才能获得正确的宽度和高度。

正如我所说，它并不完美，但我的图像现在保持它的比例。