Javascript 制作3D书籍

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

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

b） 使用，即

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

但因为我有一个固定高度的几个div，它似乎不起作用

c） 使用百分比填充底部，虽然这似乎是个好主意，但我一辈子都无法做到这一点，因为我必须在几个div上设置填充底部：

.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书目前的状况。我使用的是bootstrap4，但只针对网格，所以我并不打算在实际的书籍中实现Bootstrap解决方案。但是有人能看一下，告诉我怎么做吗？我对CSS和JS/jQuery方法都持开放态度，只要它们能够正确扩展。非常感谢

我真的不明白你到底想要什么，尤其是当你看着密码笔的时候。高度是否应与视口一样高？或者宽度应该和视口/文档一样宽，同时保持纵横比？如果我的问题让人困惑，请原谅。是的，我需要宽度与视口/文档一样宽，同时保持纵横比@因为我可以使宽度响应，但高度是一个问题，因为它保持不变，它弄乱了比率。好吧，我明白了。然后这将是更多的工作，因为你的CSS有固定的宽度/大小/长度。您必须将它们全部转换为百分比，或者使用JavaScript明确地设置它们。我唯一能想到的另一件事是使用

book wrap

上的CSS

scale

属性，并根据所需的宽度除以系数1处的当前宽度来计算系数。实际上，由于我唯一的响应问题是在小于350px的屏幕上，scale属性工作得很好。这是一个快速修复，几乎没有缺点。谢谢@MiB的建议！这肯定比那些复杂的好。