计算缩放值以转换iframe以覆盖视口中的内容

Question

bounty到期在4天内。该问题的答案有资格获得+ 100声望赏金。Toni Michel Caubet想要引起更多关注对此问题。

[我正在尝试使用带有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})`"..>

但是它不会完全填满视口，特别是当视口比例小于1（横向比高度大的风景）

如何为每个分辨率正确计算（最小比例转换值？我想我有人像风景的风景，但找不到关键

有什么想法吗？

-编辑-

这里是我目前使用的代码codepen，如果它有助于理解（在香草js中，因为我在环境中使用vuejs）

-UPDATE-

此更新的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，使用Flexbox将iframe居中，并使用mediaquery来检查aspect-ratio：