el-dialog弹窗展示整张图片

用户昵称nickName

已于 2023-08-23 10:26:12 修改

阅读量370

点赞数

文章标签： javascript vue.js 前端

于 2023-08-23 10:23:44 首次发布

本文链接：https://blog.csdn.net/cxe320/article/details/132446651

版权

<el-dialog :visible.sync="runOpen" append-to-body custom-class="largeImgDialog" style="top: 0px !important;
        bottom: 0px !important;
        width: 100% !important;
        height: 100% !important;">
            <img src="../assets/tub.png" style="width: 60%; margin-left: 20%; margin-top:5%" alt="">
        </el-dialog>

::v-deep .largeImgDialog {
    background: initial;
    margin: 0 !important;

    .el-dialog__close,
    .el-icon svg {
        width: 2rem !important;
        height: 2rem !important;
    }

    img {
        max-width: 96%;
        max-height: 95%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}