日常（css） -- 图片区域宽高相等，且居中

/* 容器 */
.box{
    position: relative;
    width: 100%; /* 自定义 */
    overflow: hidden;
}
.box::before{
    display: block;
    content: "";
    padding-top: 100%;
}
/* 图片 */
.box>img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}