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

Question

我正在开发一个视频编辑工具，需要在水平和垂直方向调整屏幕大小时保持视频的 16:9 宽高比。到目前为止，当水平调整大小和垂直向下调整大小时，我已经按预期使其正常工作，但是在 垂直向上调整大小 时无法使其正常工作。我使用的 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 语句内尝试的所有内容都会“跳动”。

如有更好的解决方案，将不胜感激。谢谢大家！

- Juan Martín García

---

我将其高度减少了-1像素。当您缓慢调整大小时，这是有效的。如果您以正常速度调整窗口大小，它是否有效？但是，为了提供改进建议，请考虑基于mainSection进行所有计算，而不是当前视频高度（和宽度）。也就是说，根据mainSection的宽度和高度进行计算。 - GetSet

谢谢您的回复！我也尝试过这样做，但是mainSection比视频本身要高，所以也会导致出错。 - Juan Martín García

Answer 1

搞定了！我使用了这个神奇的仅基于CSS的解决方案：https://codepen.io/EightArmsHQ/pen/BvNzrm，与BugsArePeopleToo的建议类似，来自eightarmshq：

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

- Juan Martín García

Answer 2

CSS的宽高比技巧可能是一个不错的解决方案：https://css-tricks.com/aspect-ratio-boxes/

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

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

该值是根据所需的宽高比（在此情况下为16:9）计算正确高度，并通过乘以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>

- BugsArePeopleToo

---

谢谢您的回复！这确实是一个好方法，我也尝试过了，但当您仅垂直调整大小时，它不起作用：https://share.getcloudapp.com/YEud2yvx 这是我的最初问题。 - Juan Martín García