Question

我有一个jQuery UI面板框，其中包含嵌入的YouTube视频。我让面板可以调整大小。我希望保持面板盒的宽高比，当它调整大小时，盒子底部没有太多的空白。

我的面板框以470px高x 525px宽度开始。通过使用aspectRatio: true作为jQuery可调整大小的选项，我得到了框底部的空白。使用在线计算器，它告诉我我的宽高比是105/94。强制这个宽高比具有相同的效果。

这是一个jsfiddle，我已经修改了一下。

对于那些不想查看jsfiddle的人，这里是代码：

<div id="video" class="video panel panel-default draggable">
  <button type="button" class="video close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <div class="panel-heading draggable-handler">Stream</div>
  <div class="panel-body">
    <div class="videowrapper">
      <iframe width="100%" height="auto" src="https://www.youtube.com/embed/live_stream?channel=UClnQCgFa9lCBL-KXZMOoO9Q" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="info_outer">
      <div class="row">
        <div class="col-xs-6"><span class="info">Info Panel</span></div>
        <div class="col-xs-6"><span class="info">More Info</span></div>
      </div>
    </div>
    <div class="clear"></div>
    <div id="copyright" class="copyright alert alert-danger">
      Copyright area
    </div>
    <div id="SocialBar" class="SocialBar">
      <a class="btn btn-social login-twitter" href="https://twitter.com/intent/tweet?text='+shareText+'" target="_blank"><span class="fa fa-twitter"></span> Share on Twitter</a>
      <a class="btn btn-social login-facebook" href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank"><span class="fa fa-facebook"></span> Share on Facebook</a>
      <button type="button" class="openChaserChat btn btn-social btn-pinterest" id="'+chaser_id+'"><span class="chaserChatIcon fa fa-comment"></span> Open Chat</button>
    </div>
  </div>
</div>

一些CSS：

.panel {
  width: 525px;
  height: 470px;
  top: 140px;
  left: 10px;
}

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 25px;*/
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

和jQuery

jQuery('#video').resizable({
  aspectRatio: true,
  minWidth: 525,
  minHeight: 470,
});

jQuery("#video").draggable({
  handle: ".draggable-handler"
});

我理解空白是为了保持纵横比;但也许有办法减少它？

如果删除aspectRatio: true,并拖动SW角落，则元素会从面板中移除。也许这种方法有一个修复方法呢？

jQuery UI可调整大小，保持宽高比，无需额外的空白区域

0 个答案: