关于图片定位不能自适应问题

1.问题：

  在左右布局中间定位一张图片后，屏幕分辨率改变后，位置错乱，如图：

image.png

首先，大致描述一下代码：

/*我的资源，数据总量*/
export const Total = (props) => {
    return (
        <div className={ style.total }>
            <Row>
                <Col span={4}>
                    <div className={ style.total_left }>
                        <div></div>
                        <div></div>
                    </div>
                    ![](/static/img/desktop/total.png)
                </Col>
                <Col span={20}>
                    <div className={ style.total_right }>
                        <div>
                            <p>
                                <span>2351</span>
                                <span>万</span>
                            </p>
                        </div>
                        <div className={ style.bg_color }>数据总量</div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}

之前的css是这样写的：

/*我的资源，数据总量*/
.total{
    border: 2px solid @second-color;
    margin-top: 55px;
    height: 130px;
    .total_left{
        border-right: 2px solid @second-color;
        /* width: 32px; */
        div:nth-child(1){
            border-bottom: 2px solid @second-color;
            height: 64px;
        }
        div:nth-child(2){
            height: 64px;
        }
    }
    .img{
        position: relative;
        top: -84px;
        left: 12px;
    }
    .total_right{
        text-align: right;
        p{
            height: 96px;
            line-height:96px;
            padding-right: 5px;
            .font-over-hide;
            span:nth-child(1){
                font-size: 36px;
            }
            span:nth-child(2){
                font-size: 20px;
            }
        }
        .bg_color{
            height: 30px;
            line-height: 30px;
            background-color: @second-color;
            color: #000;
            font-size: 18px;
            padding-right: 5px;
        }
    }
}

后来的css是这样写的：

.total{
    border: 2px solid @second-color;
    margin-top: 55px;
    height: 130px;
    position: relative;//父元素相对定位
    .total_left{
        border-right: 2px solid @second-color;
        /* width: 32px; */
        div:nth-child(1){
            border-bottom: 2px solid @second-color;
            height: 64px;
        }
        div:nth-child(2){
            height: 64px;
        }
    }
    .img{
       /*注意：定位图片要用绝对定位，top和left要用百分比取值，最后一定要限制图片宽度为100%*/
        position: absolute;//定位图片定位
        top: 40%;
        left: 43%;
        width : 100%;
    }
    .total_right{
        text-align: right;
        p{
            height: 96px;
            line-height:96px;
            padding-right: 5px;
            .font-over-hide;
            span:nth-child(1){
                font-size: 36px;
            }
            span:nth-child(2){
                font-size: 20px;
            }
        }
        .bg_color{
            height: 30px;
            line-height: 30px;
            background-color: @second-color;
            color: #000;
            font-size: 18px;
            padding-right: 5px;
        }
    }
}

修改后的效果是这样的：

image.png