图片等比缩放css3实现

图片等比缩放css3实现_第1张图片

首先是通过transform: translate(-50%,-50%);配合position: absolute; top: 50%;left: 50%;实现垂直与水平居中;

然后通过max-width: 100%;max-height: 100%;同时设定最大宽高实现等比缩放

    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    max-width: 100%;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;

你可能感兴趣的:(css)