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

26 篇文章 1 订阅
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;
        }
      }
    }
  }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值