[英]CSS: When I change a background-image url() it no longer respects background-size: contain until I resize h&w
I am developing an interface for editing tiles in a Smart Home panel: https://github.com/open-dash/HousePanel 我正在开发一个界面,用于在Smart Home面板中编辑图块: https : //github.com/open-dash/HousePanel
While editing a tile, users will be able to change the background-image of the tile from a library of icons. 在编辑图块时,用户将能够从图标库中更改图块的背景图像。 That is all working, except that when the image is replaced it ignores the background-size: cover for the element in CSS.
一切正常,除了替换图像时,它忽略了CSS中元素的background-size:cover。 However, if I change both the height and width it resizes correctly, and I can even set it back to the original size and it stays the right size (see image below.)
但是,如果我同时更改高度和宽度,则会正确调整大小,甚至可以将其设置回原始大小,并保持正确的大小(请参见下图)。
Interface - User selects new image in step 2 界面-用户在步骤2中选择新图像
Because the image is getting replaced, I tried setting the css after the fact, so, in this order: 因为图像已被替换,所以我尝试在事实之后设置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;
...but still I have to change the width and height of the parent div to have it reacalculate/contain to fill the parent div correctly. ...但是我仍然必须更改父div的宽度和高度,以使其重新计算/包含以正确填充父div。 What gives?
是什么赋予了?
Note: The above are all added via the following code snippet, which works fine otherwise, and I can see the changes when I inspect the element in chrome: 注意:以上内容都是通过以下代码段添加的,否则可以正常工作,并且在检查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);
}
}
Any thoughts? 有什么想法吗? Is there any way to force it to recalculate the area it needs to fill?
有什么方法可以迫使它重新计算需要填充的面积?
TIA! TIA!
If I am correct an on-the-fly stylesheet is created and xhr'd each time? 如果我是对的,那么会创建一个即时样式表,并且每次都xhrd?
Have you tried to set the css property directly via jQuery? 您是否尝试过直接通过jQuery设置css属性? ( example )
( 示例 )
If not, consider triggering a refresh of the element: 如果没有,请考虑触发元素的刷新:
document.getElementById(selector).style.display = 'none';
document.getElementById(selector).style.display = 'block';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.