css - 插入 dom 元素后未应用 CSS
问题描述
我有一个具有特定宽度和高度的 div 容器。我使用 javascript 在此 div 中插入图像。链接到图像类的 CSS 是
max-height: 100%;
max-width:100%;
所以我的图像可以在容器中占用尽可能多的空间并保持其比例。问题:插入时,图像占用所有空间(宽度和高度 100%),并且其比例未保留。
非常奇怪的是,当我打开控制台检查图像时,如果我取消选中 css 属性 max-height:100% 然后再次检查它,我的图像会调整大小并保持其比例。当我按下一个按钮来改变另一个地方的 DOM 上的值时,也会发生调整大小。
我能做些什么来强制这个CSS“刷新”,也许使用javascript?
解决方案
为了回答这个问题,我发现了问题和解决方法:我的容器有一个 flex:1 属性,因此没有任何硬编码的宽度和高度。我所做的是在插入后获取容器的高度和宽度,然后将此值应用于 css 宽度和高度。奇怪的是,我必须在 setTimeout 函数 (1ms) 中执行此操作才能获得正确的宽度和高度。
正如我所说,它并不完美,但我的图像现在保持它的比例。
推荐阅读
- php - 将二维php数组元素相减并输出到同一张表
- python - 有没有办法把一个蟒蛇龟游戏放到网上?
- uitableview - 插入行后有没有办法显示键盘?
- python - Shouldn't my try/except block have caught this AttributeError?
- android - 如何使用 RecyclerView 和 Android Studio 中的按钮将项目添加到列表并因此删除它们?
- java - 将 .txt 文件中的所有单词添加到自定义对象的 ArrayList
- typescript - 并行运行一组 TaskEithers,但如果 1 个或多个任务失败则继续
- c# - 需要帮助手动添加到字典
- testing - 多个 if 语句的圈复杂度
- python - 如何抓取一个网站的所有首页文字内容?