调整浏览器大小时保持视频的纵横比答案

【问题标题】：Maintain aspect ratio of a video when resizing the browser调整浏览器大小时保持视频的纵横比
【发布时间】：2020-01-31 01:54:04
【问题描述】：

我正在开发视频编辑工具，在水平和垂直调整屏幕大小时，我需要保持视频的16:9 纵横比。到目前为止，我在水平调整大小和垂直调整大小时都能按预期工作，但在sizing up vertically 时无法正常工作。我用来计算视频高度和调整大小的 Javascript 代码如下（注意 else 子句是空的，因为这是代码应该去的地方）：

const calculateHeight = () => {
    // Get the other elements on the page
    const header = document.querySelector('.main-navigation');
    const meshTopBar = document.querySelector('.mesh__top-bar');
    const footer = document.querySelector('.mesh__bottom-bar');
    // Get the section to apply the window height to it
    const mainSection = document.querySelector('.insert-level-container');
    // Get the video elements
    const editor = document.querySelector('.mesh__insert-editor-container');
    const video = document.querySelector('.mesh__insert-editor-video-container');

    // Apply the height to the main section by calculating the window height minus the other elements' height
    if(mainSection !== null) {
      mainSection.style.height = (window.innerHeight - header.offsetHeight - meshTopBar.offsetHeight - footer.offsetHeight) + 'px';
    }

    // This should be the ideal height for the video
    video.style.minHeight = ((video.offsetWidth * 9) / 16) + 'px';

    // If the video height is bigger than the section height (calculated above), then resize it
    if(video.offsetHeight + 115 > mainSection.offsetHeight) {
      video.style.minHeight = video.offsetHeight - 1 + 'px';
      editor.style.maxWidth = video.offsetHeight * 16 / 9 + 'px';
    } else {
      // This is where the logic for the vertical resizing should go
    }
  }

这些项目的相关 CSS 是：

.mesh__insert-editor-container {
    margin-left: auto;
    margin-right: auto;
}

.mesh__insert-editor-video-container {
    position: relative;
    width: 100%:
}

还有 HTML：

<section class="mesh__insert-editor-container flex__one flex-container flex-column horizontally-left-aligned" id="video-main-container">
    <div class="mesh__insert-editor-video-container flex-container horizontally-right-aligned flex-wrap">
        <video class="mesh__insert-editor-video-placeholder"></video>
    </div>
</section>

所有这些代码是：

获取页面上所有元素的高度，将它们相加并减去该高度来计算主要部分的高度；
如果视频高度大于部分高度，我会在每次调整窗口大小时将其高度减小-1px，然后计算新宽度。

以上所有代码都给了我this result，这在大多数情况下都很好用，但是当if 语句的条件不满足时，我需要调整视频的大小。我在else 语句中尝试的所有内容都变得“跳跃”。

任何更好的解决方案将不胜感激。谢谢大家！

【问题讨论】：

I reduce its height by -1px ... 这在您慢慢地调整大小时有效。如果您以正常速度调整窗口大小，它会起作用吗？ ...但要提供改进建议，请考虑根据您的 mainSection 进行所有计算，而不是目前的视频高度（和宽度）。也就是根据mainSection的宽度和高度进行计算。
感谢您的回复！我也试过了，但是mainSection 比视频本身高，所以它也会把事情扔掉

标签： javascript css reactjs video aspect-ratio

【解决方案1】：

CSS 纵横比技巧可能是一个很好的解决方案：https://css-tricks.com/aspect-ratio-boxes/

该方法利用了 CSS 中的一个怪癖，其中基于百分比值的padding 将相对于元素的宽度。使用这个技巧创建一个容器，重要的是这一行：

padding-top: calc(9/16 * 100%);

该值根据您想要的纵横比计算正确的高度（在这种情况下 9 高 16 宽）并通过乘以 100% 相对于元素的宽度生成它。

在容器保持纵横比的情况下，只需将内容放在绝对定位的内部 div 中，就可以了。这个解决方案在那个时候是完全响应的。

* { box-sizing: border-box }

.outer-max-width {
  max-width: 960px;
  margin: 0 auto;
}

.aspect-ratio-box {
  width: 100%;
  padding-top: calc(9/16 * 100%);
  position: relative;
  border: 2px solid red; /* for demo visibility, remove */
}

.aspect-ratio-box-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border: 2px solid blue; /* for demo visibility, remove */
}

.video-placeholder {
  display: block;
  width: 100%;
  height: auto;
}

<div class="outer-max-width">
  <div class="aspect-ratio-box">
    <div class="aspect-ratio-box-content">
      <img class="video-placeholder" src="https://placeimg.com/640/360/nature" />
    </div>
  </div>
</div>

【讨论】：

感谢您的回复！这当然是一个好方法，我也尝试过，但是当您仅垂直调整大小时这不起作用：share.getcloudapp.com/YEud2yvx 这是我最初的问题

【解决方案2】：

让它工作！我使用了这个惊人的纯 CSS 解决方案：https://codepen.io/EightArmsHQ/pen/BvNzrm 类似于 BugsArePeopleToo 的建议，来自八臂shq：

.content{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background: #555;
  box-shadow: inset 1vh 1vh 10vh 0 rgba(0,0,0,0.5);
  display: flex;


  box-sizing: border-box;
  border: 25px solid #cecece;
}

【讨论】：