时间戳

首页 > 解决方案 > 使 3D 书籍具有响应性

javascript - 使 3D 书籍具有响应性

问题描述

我一直在根据这个例子用 CSS 制作一本 3D 书，我一直在努力让它具有响应性。身高是最大的问题。我尝试了以下方法：

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

b) 使用这个 jQuery 示例，它是

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 方法都持开放态度，只要它可以正确扩展。非常感谢！

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读