使3D图书响应

Question

我一直在制作一本基于this example的CSS的3D书籍，而且我一直在努力使其具有响应性。高度是最大的问题。我尝试了以下内容：

a）使宽度为100％并使用vh作为高度，但这看起来不太好

b）使用this jQuery example，即

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

但是因为我有几个具有设定高度的div，所以它似乎不起作用

c）使用padding-bottom和百分比，虽然这似乎是一个好主意，但我无法在我的生活中做到这一点，因为我必须在几个div上设置padding-bottom：

.bk-left, .bk-back, .bk-front, .bk-cover {
  /* and they also can't be the same padding-bottom 
  because it doesn't seem to work like that */
}

但这些都没有真正奏效。要么我错误地使用它们，要么我还能做些什么。这是我目前使用3D书籍的codepen。我正在使用Bootstrap 4，但仅用于网格，所以我并不是真的想在实际的书中实现Bootstrap解决方案。但有人可以看看，让我知道我该怎么做？我对CSS和JS / jQuery方法都持开放态度，只要它能够正确扩展。非常感谢！