vue iframe 内部网页的等比例缩放

可以使用 CSS 中的 transform 属性来实现内部网页的等比例缩放。具体实现步骤如下：

1. 给 iframe 元素添加一个父容器，并设置该容器的宽度和高度。

2. 在父容器中添加一个伪元素，用来占据一个空白位置。

3. 使用 CSS 中的 transform 属性对 iframe 进行等比例缩放。

代码示例：

HTML 代码：

<div class="iframe-container">
  <iframe src="https://www.example.com"></iframe>
</div>

CSS 代码：

.iframe-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 这里的比例可以根据实际情况进行调整 */
  position: relative;
}

.iframe-container::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  transform: scale(1);
  transform-origin: 0 0;
}

在上面的示例中，我们使用了 padding-bottom 属性来设置容器的高度，然后使用伪元素来占据一个空白位置，使得 iframe 的大小可以被容器撑开。然后使用 transform 属性对 iframe 进行等比例缩放，并设置 transform-origin 属性使得缩放的起点为 iframe 的左上角。