Html 背景尺寸100%自动在IE 10中不工作

我有一些带有svg背景的div层。设置为100%宽度和自动高度：

  <div class="group section hot-bonus">
    <div class="layer layer-base clouds"></div>
    <div class="layer layer-back1 clouds-1"></div>
    <div class="layer layer-back2 clouds-2"></div>
    <div class="layer layer-back3 clouds-3"></div>
    <div class="layer layer-back5 bg"></div>
  </div>

所有云都遵循以下格式：

.clouds {
    z-index: 6;
    background: url(../images/hot_bonus_clouds.svg) center bottom no-repeat;
    background-size: 100% auto;
    @include transform( scale(1.1) );
}  

结果如下（全宽浏览器屏幕截图）：

然而，我似乎无法让它在IE10上工作。这就是它给我的（不必在意设计/布局的差异，只需不拉伸的云背景）：

尽管IE10显示他们有样式

背景大小：100%自动已应用

有什么想法吗？
答案如下：

确保SVG具有宽度和高度

我从illustrator生成了SVG，我必须再次打开它们并为每个SVG设置宽度/高度。设置它的一个非常快速的方法是注意svg元素的这一部分：

viewBox=“0 0 1428.5 521.8”
其中
1428.5
是宽度，
521.8
是高度。因此，修复程序确保SVG元素的外观如下所示：

<svg viewBox="0 0 1428.5 521.8" width="1428.5" height="521.8"....>/***/</svg>

/***/
是否将.clouds容器和任何父容器设置为100%宽度？如果你展示更多的代码结构可能会更好。我已经更新了一点OP，如果你还需要什么，请告诉我。嗨，克里斯蒂娜，谢谢你的输入-链接成功了！
<svg viewBox="0 0 1428.5 521.8" width="1428.5" height="521.8"....>/***/</svg>