@cw-devops/bk-magic-vue/lib/ui/image.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-image{
    position:relative;
    display:inline-block;
    overflow:hidden;
}

.bk-image-inner{
        width:100%;
        height:100%;
        vertical-align:top;

    }

.bk-image-inner-center{
            position:relative;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            display:block
        }

.bk-image-placeholder{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        font-size:24px;
        background:#f0f1f5;
        color:#c4c6cc;
        vertical-align:middle;
    }

.bk-image-placeholder img{
            width:100%;
        }

.bk-image-preview{
        cursor:pointer
    }