Question

我希望以固定大小的1440px显示iframe，但将其缩放到我页面上的容器中。我可以用固定的数字来工作，例如。

.scaled {
  width: 1440px;
  transform: scale(0.5);
  transform-origin: 0,0;
}

然而，可以将其缩放以适合容器为百分比宽度的父容器，例如。

<div class="row">
   <div class="column"> 
        .... some content
   </div>

   <div class="column">
       <iframe src="...blah" class="scaled" />
   </div>
</div>

编辑：进一步说明

因此，理想的结果是使列为行的50％，行宽可以随视口而变化，例如900px，1440px等...

但是，我想让iframe占据整个列宽并显示，就像它在1440px视口中一样。（因此宽度为1440px和比例变换）

不幸的是，这是无效的代码，因为你不能除以像素长度，但是像这样：

.scaled-proportion {
    width: 1440px;
    transform: scale(calc(100% / 1440px));
    transform-origin: 0,0;
}

Answer 1

正如你可以从MDN Web Docs读到并且也想到了自己，

[在calc()的分区中]右侧必须是<number>。

不幸的是，这意味着此功能无法与两个px / %值一起使用。
calc（）可能是我们唯一的JavaScript替代品，如果没有，我们就必须使用它。

您可以read the full guide at CSS-Tricks，或者您可以看到他们提供的工作示例here。

基于容器宽度的Css变换比例

1 个答案: