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

i_am_a_div_日积月累_

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

阅读量491

点赞数

分类专栏：文件图片 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 个专栏收录

58 篇文章 5 订阅

订阅专栏

文件图片

26 篇文章 1 订阅

订阅专栏

css

19 篇文章 1 订阅

订阅专栏

图片保持比例最大化

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