el-dialog弹框中img图片保持比例最大化；图片保持比例最大化

i_am_a_div_日积月累_

已于 2022-10-14 18:04:26 修改

阅读量674

点赞数

CC 4.0 BY-SA版权

分类专栏：文件图片 css element-ui 文章标签： vue.js javascript 前端

于 2022-10-14 16:22:21 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/127322724

element-ui 同时被 3 个专栏收录

77 篇文章

订阅专栏

文件图片

28 篇文章

订阅专栏

css

28 篇文章

订阅专栏

本文介绍了一种使用 Element UI 的对话框组件来展示图片的方法，并通过 CSS 样式确保图片能够在保持原有宽高比的情况下最大化显示。这种方法适用于需要查看大尺寸图片的应用场景。

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

图片保持比例最大化

    <el-dialog :visible.sync="dialogVisible" center class="look_img_dia">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>


  .look_img_dia {
    /deep/.el-dialog {
      margin-top: 5vh !important;
      width: -webkit-calc(~'80vw') !important;
      width: -moz-calc(~'80vw') !important;
      width: calc(~'80vw') !important;
      height: -webkit-calc(~'90vh') !important;
      height: -moz-calc(~'90vh') !important;
      height: calc(~'90vh') !important;
      .el-dialog__body {
        box-sizing: border-box;
        padding: 10px;
        width: -webkit-calc(~'80vw') !important;
        width: -moz-calc(~'80vw') !important;
        width: calc(~'80vw') !important;
        height: -webkit-calc(~'90vh - 100px') !important;
        height: -moz-calc(~'90vh - 100px') !important;
        height: calc(~'90vh - 100px') !important;
        img {
          width: 100% !important;
          height: 100% !important;
          object-fit: scale-down !important;
        }
      }
    }
  }