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

我希望以固定大小的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>

正如你从书中读到的，你自己也明白了

[在

calc（）

的分区中]右侧必须是a

不幸的是，这意味着此函数不能与两个

px

/

%

值一起使用。
calc（）可能是JavaScript的唯一替代品，若并没有它，我们只能使用它

---

您可以，或者您可以看到他们提供的一个工作示例。

您能详细说明吗？@AkashPinnaka我已经为问题添加了更多细节您希望iframe的长度是父级的两倍吗？i、 例如，

.column

@akashinnaka no-iframe是父级的宽度。但它显示内容视口时，就好像它是1440px（无论iframe大小如何）

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