响应式SVG /数据图像

Question

我已经将两个SVG图像转换为css / data图像，这是第一次以这种方式工作。

我希望图像在中心响应，最大宽度为800px。

我的高度为100％，宽度为100％但是当浏览器很窄时，图像下方存在巨大的间隙，这使得用户必须滚动很长的路才能到达下一个图像，我希望它正确反对它。

我整天搞砸了这一切，无法弄清楚。

我附上了一个小提琴，看看我到目前为止所看到的内容，请参阅下面的css代码。

<div class="container">
  <div class="front"></div>
  <div class="front"></div>
</div>

并且这里的css减去正面样式，因为它无法正确发布。

* {
    margin:0;
    padding:0;
}
html {
    width:100%;
    height:100%;
}
body {
    width:100%;
    height:100%;
    background:pink;
}
.container {
    width:100%;
    height:100%;
    margin:0 auto;
}

这是小提琴：

https://jsfiddle.net/gjkx1ye5/1/