css - 计算缩放值以转换 iframe 以覆盖其在视口(viewport)中的内容

Question

我正在尝试使用带有 vimeo 视频的 iframe 制作对象适合:封面(或背景大小:封面，如果它是图像)。由于 vimeo 根据 iframe 宽度/高度/纵横比调整视频大小，我认为使用 transform: scale 属性可以实现。

我知道我有使用 vimeo 视频缩放 iframe 的逻辑，在大多数情况下都能完成工作(覆盖屏幕)但它并不完美:

const w = window.innerWidth
const h = window.innerHeight
const ratioVideo = 640 / 360
const ratioScreen = w / h

const calculatedRatio = ratioVideo / ratioScreen
// minimum scale value
const minRatio = 1.45

scaleVideo = calculatedRatio > minRatio ? calculatedRatio : minRatio

然后我有:

<iframe :style="`transform:scale(${scaleVideo})`"..>

但它不会完全填满视口(viewport)，特别是当视口(viewport)比小于 1 时(宽度比高度大得多的风景)

如何为每个分辨率正确计算(最小比例变换值)？我想我有单独的肖像/风景，但找不到 key

有什么想法吗？

-编辑-

这是一个codepen使用我当前的代码，如果它有助于理解(在 vanilla js 中，因为我在我的环境中使用 vuejs)

-更新-

这更新了 codepen几乎达到了我的意思，但出于某种原因，我必须在计算比率中增加一小部分，我猜这是因为滚动条之类的？代码预览:

let calculate = function () {
  const w = window.innerWidth
  const h = window.innerHeight
  const ratioVideo = 640 / 360
  const ratioScreen = w / h

  if (ratioScreen > ratioVideo) {
    calculatedRatio = ratioScreen / ratioVideo
  } else {
    calculatedRatio = ratioVideo / ratioScreen
  }

  /* a little % more */
  calculatedRatio = calculatedRatio * 1.07 
  document.documentElement.style.setProperty('--s', calculatedRatio);
}

Answer 1

如果您从 CSS 中删除居中代码，您的演示就可以运行。 See this pen

    .video {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    :root {
      --s: 1;
    }

    .video__player {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(var(--s));
    }

let calculate = function () {
  const w = window.innerWidth
  const h = window.innerHeight
  const ratioVideo = 640 / 360
  const ratioScreen = w / h

  const calculatedRatio = Math.max(ratioScreen, ratioVideo) / Math.min(ratioScreen, ratioVideo);

  document.documentElement.style.setProperty('--s', calculatedRatio);
  console.log(calculatedRatio)
}

calculate()
window.onresize = () => {
  calculate()
}

说明:您的 iframe 设置为 100% 宽度/高度，这意味着它在技术上已经居中于视口(viewport)。当使用 transform: scale 函数而不指定 transform-origin 时，默认值为 50% 50% 意味着它将从该元素的中心而不是左上角开始缩放。