CSS：當我更改背景圖片url（）時，它不再遵守background-size：包含直到我調整h＆w的大小

Question

我正在開發一個界面，用於在Smart Home面板中編輯圖塊： https : //github.com/open-dash/HousePanel

在編輯圖塊時，用戶將能夠從圖標庫中更改圖塊的背景圖像。 一切正常，除了替換圖像時，它忽略了CSS中元素的background-size：cover。 但是，如果我同時更改高度和寬度，則會正確調整大小，甚至可以將其設置回原始大小，並保持正確的大小（請參見下圖）。

界面-用戶在步驟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

如果我是對的，那么會創建一個即時樣式表，並且每次都xhrd？

您是否嘗試過直接通過jQuery設置css屬性？ （ 示例 ）

如果沒有，請考慮觸發元素的刷新：

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