在宽度和高度上具有纵横比的响应式 div

Question

我试图让我的播放器 div 在高度方面做出响应。目前，如果我调整宽度，div 会缩小，但如果我调整高度，它不会。而且滚动条没有帮助，因为我猜想是固定的 lightbox-wrap div。

有没有办法让玩家 div 也响应高度？ （不改变 lightbox-wrap 被修复）

https://jsfiddle.net/x723zrde/7/

.lightbox-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.lightbox {
  position: relative;
  width: 90%;
  max-width: 520px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.player {
  position: relative;
  background: #ad3;
}

.player:after {
  padding-top: calc(56.25%);
  display: block;
  content: '';
}

  <div class="lightbox-wrap">

    <div class="lightbox">

      <div class="player"></div>

    </div>

</div>

Answer 1

虽然默认情况下可以将宽度附加到窗口，但高度仅随 div 内的内容而变化。但是，如果您可以将它绑定到一个事件（如窗口调整大小），您可以使用 Javascript 来完成。

请注意，为了演示，我只是使用了任意值。您可以使用这些数字，甚至可以使用.style.transform 更改父容器(.lightbox) 调整大小的方式。剩下的就看你自己了。

var players = document.getElementsByClassName("player");
window.addEventListener("resize", function(event) {
var w = window.innerWidth;
var h = window.innerHeight;
var desired_h = h-100; // You can play with it;
var desired_w = desired_h*16/9;
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].style.height = desired_h+"px";
        players[i].style.width = desired_w +"px";
    }
});

.lightbox-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.lightbox {
  position: relative;
  width: 90%;
  max-width: 520px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.player {
  position: relative;
  background: #ad3;
}

.player:after {
  padding-top: calc(56.25%);
  display: block;
  content: '';
}

<div class="lightbox-wrap">

    <div class="lightbox">

      <div class="player"></div>

    </div>

</div>