javascript - CSS:当我更改背景图像 url() 时，它不再遵循背景大小:包含直到我调整 h&w 大小

Question

我正在开发一个用于在智能家居面板中编辑图 block 的界面:https://github.com/open-dash/HousePanel

在编辑图 block 时，用户将能够从图标库中更改图 block 的背景图像。这一切都有效，除了当图像被替换时它忽略了 background-size: cover 为 CSS 中的元素。但是，如果我同时更改高度和宽度，它会正确调整大小，我什至可以将它设置回原始大小并保持正确的大小(见下图。)

Interface - User selects new image in step 2

因为图像正在被替换，所以我尝试在事后设置 css，所以，按以下顺序:

background-image: url("http://192.168.1.1/icons/toilet.png");
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;

...但我仍然必须更改父 div 的宽度和高度以使其重新计算/包含以正确填充父 div。给了什么？

注意:以上都是通过以下代码片段添加的，否则效果很好，我在 chrome 中检查元素时可以看到更改:

if(sheet.insertRule){
  if(index > -1) {
    sheet.insertRule(selector + "{" + rules + "}", index);        
  }
  else{
    sheet.insertRule(selector + "{" + rules + "}");           
  }
}
else{
  if(index > -1) {
    sheet.addRule(selector, rules, index);    
  }
  else{
    sheet.addRule(selector, rules);   
  }
}

有什么想法吗？有没有办法强制它重新计算需要填充的区域？

TIA!

Answer 1

如果我是正确的，是否创建了一个即时样式表并每次都进行 xhr 处理？

您是否尝试过直接通过 jQuery 设置 css 属性？ ( example )

如果不是，考虑触发元素的刷新:

document.getElementById(selector).style.display = 'none';
document.getElementById(selector).style.display = 'block';