css图片宽度随浏览器窗口大小变化，高度始终显示示宽度的四分之一，且图片居中不变形

不论是pc端还是手机端浏览器放大缩小（宽度变化）使图片高度展示为宽度的四分一，超出只显示最中间部分

HTML代码如下：

<div class="category-cover-image">
    <img src="图片地址" alt="">
</div>

css代码如下：

@media only screen and (min-width: 768px) {
    .category-cover-image {
        margin: 20px auto;
        width: 100%;
        height: 0;
        padding-bottom: 25%;
        position: relative;
        overflow: hidden;
    }

    .category-cover-image img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 48px 0 48px;
    }
}


@media only screen and (max-width: 767px) {
    .category-cover-image {
        margin: 20px auto;
        width: 100%;
        height: 0;
        padding-bottom: 25%;
        position: relative;
        overflow: hidden;
    }

    .category-cover-image img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 16px 0 16px;
    }

}

效果展示：

上传图片如下

手机端：

pc端：

上传4：1的图片

 

效果：