如何自动缩放背景图像并保持图像比例？

Question

我正在创建动画图像网格，并且将background-image用作CSS属性而不是html标签。

我遇到的问题是我的背景图像无法在窗口调整大小时缩放。周围的DIV确实会按比例缩放宽度，但不会缩放图像。

我已经尝试了许多解决方案以使其正常工作，但是问题是，一旦我删除或更改元素的高度，图像就会消失。

我认为以下CSS引起了我的问题：

 body .vertical .horizontal {
 width: 100%;
 height: 150px;
 position: relative;
 box-shadow: -1px 1px 0 1px #000000 inset, 0 0 50px rgba(0, 0, 0, 0.5) inset;
overflow: hidden;
 text-align: center;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover!important;
}

但是将高度设置为自动会弄乱事情。这是我在JsFiddle https://jsfiddle.net/ety9gr7L/

上的示例

所有图像应始终为正方形。如果您调整浏览器的大小，将会看到我的问题。

预期结果是显示完整图像，保持宽高比，仅根据窗口大小调整其尺寸。