Question

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

有没有办法让玩家div对身高做出反应？（不改变灯箱包装固定）

＆＃13;

.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: '';
}

＆＃13;

  <div class="lightbox-wrap">

    <div class="lightbox">

      <div class="player"></div>

    </div>

</div>

＆＃13;

Answer 1

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

请注意，我只使用了任意值，以便进行演示。您可以使用.style.transform来播放数字，甚至可以更改父容器（。lightbox）的大小调整方式。其余的一切都取决于你。

＆＃13;

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";
    }
});

＆＃13;

.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: '';
}

＆＃13;

<div class="lightbox-wrap">

    <div class="lightbox">

      <div class="player"></div>

    </div>

</div>

＆＃13;

响应式div，宽高比均有宽高比

1 个答案: