Html 在CSS网格中保持纵横比

我正在尝试实现包含3x4元素的响应网格。我还为每个单元格使用位图图像，因此我希望保留每个单元格的纵横比。我现在遇到的问题是，我的CSS不能阻止它溢出视口的垂直大小。在水平轴上缩放时，它工作良好

按预期工作：

无法按预期工作（创建滚动条）：

链接到代码笔：

.container{
高度：100vm；宽度：100vm；/*IE9回退*/
宽度：100vmin；高度：100vmin；
位置：绝对位置；
顶部：0；底部：0；
左：0；右：0；
保证金：自动；
}
.配子片{
背景：url（'http://adrianpayne.me/game/assets/images/grass.png")不重复;；
背景尺寸：封面；
/*33.3vmin*/
宽度：计算（100vmin/3）；
浮动：左；
高度：计算（100vmin/3*（91/70））；
利润上限：-16V分钟；
}
/***为了演示**/
正文，html{margin:0；背景：#123752；颜色：#fff；}
a{color:#ccc；}

---

我对这些值进行了处理，并设法将其放在屏幕中央，而不会越界

.container{
  height:60vm; width:100vm; /* IE9 fallback */
  width: 100vmin; height: 60vmin;
  position: absolute;
  top:0;bottom:0;
  left:0;right:0;
  margin: auto;


}

.gametile {
  background: url('http://adrianpayne.me/game/assets/images/grass.png') no-repeat; 
  background-size: cover;

  /* 33.3vmin; */
  width: calc(80vmin/3);
  float:left;
  height: calc(80vmin/3*(91/70));
  margin-top: -16vmin;
}

.container{
高度：100vm；宽度：100vm；/*IE9回退*/
宽度：计算（（100vmin-16vmin）/4+16vmin）*（70/91）*3）；
高度：100V分钟；
位置：绝对位置；
顶部：0；底部：0；
左：0；右：0；
保证金：自动；
}
.配子片{
背景：url（'http://adrianpayne.me/game/assets/images/grass.png")不重复;；
背景尺寸：封面；
/*33.3vmin*/
宽度：计算值（100%/3）；
浮动：左；
身高：calc（（100%-16%）/4+16%）；
保证金底部：-16vmin；
}
/***为了演示**/
正文，html{margin:0；背景：#123752；颜色：#fff；}
a{color:#ccc；}

谢谢你，大卫！谢谢你的帮助！但您的答案似乎是通过将宽度限制为

calc（80vmin/3）

来创建左右边距。我想避免这样。谢谢！我已经用一些黑客JS解决了这个问题。但你的解决方案似乎也很有效。