.app-picture-preview { >div{ display: inline; } } .app-picture-preview__content__item{ margin: 0 8px 8px 0; display: inline-block; position: relative; >div{ display: inline-block; position: relative; width: 148px; height: 148px; .el-image{ width: 100%; height: 100%; } .item__img{ width: 100%; height: 100%; >img{ width: 100%; height: 100%; } } .item__action{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; font-size: 20px; text-align: center; color: #fff; opacity: 0; transition: opacity .3s; .item__action__download{ margin-left: 15px; } &:hover{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; font-size: 20px; text-align: center; color: #fff; opacity: 1; } &::after{ display: inline-block; content: ""; height: 100%; vertical-align: middle; } } } } .app-picture-preview__model { width: 100%; height: 100%; text-align: center; .ivu-modal{ top: 50%; transform: translateY(-50%); display: inline-block; .ivu-modal-close{ display: none; } .ivu-modal-content{ display: inline-block; } .ivu-modal-body{ display: inline-block; line-height: 0; } .el-image { width: auto; height: auto; line-height: 0; } .model__img { width: auto; height: auto; line-height: 0; img{ max-width: 1200px; max-height: 1600px; } } } }