javascript - 调整浏览器大小时保持视频的宽高比

Question

我正在开发视频编辑工具，在水平和垂直调整屏幕大小时需要保持视频的 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 语句中尝试的所有内容都变得“跳跃”。

任何更好的替代方案来解决这个问题将不胜感激。谢谢大家!

Answer 1

开始工作了!我使用了这个令人惊叹的纯 CSS 解决方案:https://codepen.io/EightArmsHQ/pen/BvNzrm类似于 BugsArePeopleToo 的建议，来自 everyarmshq:

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