获取 img元素图片的原始尺寸

最新推荐文章于 2024-08-22 10:27:49 发布

原创

最新推荐文章于 2024-08-22 10:27:49 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在项目中使用element-ui图片上传组件遇到的问题，即在IE11下，由于max-width和max-height无效导致图片超出弹窗。解决方案是通过JavaScript获取图片原始尺寸，计算并设置图片宽高以保持比例，避免拉伸。文章提供了关键代码片段，展示了如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景：

element-ui 图片上传组件，上传后的图片，点击放大镜icon需要放大显示，居中在弹窗里
插入图片示例

<el-dialog
    :title="bigTit"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
>
<div class="bigPicBox">
    <img :src="bigSrc" alt="" @load="imgLoad(bigSrc)">
</div>
</el-dialog>

上传的图片，分别有横向和纵向，那么，在弹窗里，img 宽度 100% 和高度 100% 都不合适，会导致图片的不正常拉伸。
所以图片的宽高都需要是 auto，然后 max-width:100% 和 max-height:100%;
在高版本浏览器，这个是没问题的，但是因为居中显示用的是 flex，在 IE11， max-width 和 max-height 都无效，最后导致图片超出弹窗，大概这样：