使用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;
}