缩放iframe以适应？

Question

我想模拟一个页面在另一个页面上的样子，例如小电视上的网页预览。我为此使用<iframe>，在CSS中使用scale将其缩小到合理的大小。

<div class="tv">
  <iframe src="https://example.com"></iframe>
</div>

.tv {
  width: 960px;
  height: 540px;
}

.tv iframe {
  width: 1920px;
  height: 1080px;
  scale: 0.5;
  transform-origin: 0 0;
  margin: 0;
  padding: 0;
}

现在，假设iframe大小可以不同，用脚本更改。如果iframe宽度/高度变大，则比例必须变小。如果iframe宽度/高度变小，则比例必须变大。

有没有办法设置项目的比例，使其始终适合其容器，保留纵横比？或者，每次iframe的大小发生变化时，我是否必须在脚本中计算比例？