使用iframe展示图片，如何设置图片的大小

Question

使用iframe展示图片，如何设置图片的大小
前端：ant design vue1.6.2
说明：modal 框中套了一个iframe 用以展示附件，src接收的是后端传来的url，当附件为PDF或者视频时可以自动适应大小展示，但当附件为图片时，无法自动缩放，图片尺寸大的会有滚动条，而且图片他大，根本没法看
需求：图片可以自动缩放，没有滚动条
代码部分：

            <a-modal v-model="File_visible" id="FileModel" tabindex="-1" :dialog-style="{ top: '5px' }" :destroyOnClose=true
                width="118.5rem" :footer="null">
                <a-row class="rowStyle1">
                    <iframe class="my-iframe" id="mapFrame" ref="mapFrame" frameborder="0" scrolling="auto" :src="File_url"></iframe>
                </a-row>
            </a-modal>

样式部分：

.my-iframe {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.my-iframe img {
  max-width:118rem; 
  height: auto;  
}

Answer 1

您可以在 iframe 标签内使用 img 标签展示需要的图片，并设置其宽度和高度来控制图片的大小。例如：

<iframe src="example.html">
  <img src="example.jpg" width="500" height="300">
</iframe>

在上述代码中，我们向 iframe 中嵌入了一个 img 标签以展示 example.jpg 这张图片，并分别设置了它的宽度为 500px 和高度为 300px。

也可以将 style 属性添加到 img 标签中，以便通过其他 CSS 属性来指定其宽度和高度，例如：

<iframe src="example.html">
  <img src="example.jpg" style="width: 500px; height: 300px;">
</iframe>

上述代码中，我们将 style 属性添加到 img 标签中，并通过 CSS 的 width 和 height 属性来指定宽度和高度。