如何修复CSS以在标头中容纳静态大小的图像？

Question

当窗口小于1310px时，麻烦就开始了。

此外，当视图宽度减小到1202px以下时，中心图像将被剪切。

CSS

#header-wrap {
    background: #ffffff url('../images/header/BGPATTERNx2.jpg') center center;
    margin-left: 15px;
    margin-right: 15px;
    min-height: 130px;
    min-width: 75px;
    display: flex;
    flex-flow: row nowrap;
}

.header-img-left {
    background-image: url('../images/header/LEFTx2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    flex: 1;
}

.header-img-title {
    background-image: url('../images/header/SIGNx2.png');
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: bottom;
    margin-bottom: 16px;
    /*margin-left: 16px;*/
    transform: scale(.5) translate(-50%, 50%);
    flex: 3;
}

.header-img-right {
    background-image: url('../images/header/RIGHTx2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    flex: 2;
}

HTML

<div class="row bottom-align-parent">
    <div id="header-wrap">
        <div class="header-img-left">
        </div>
        <div class="header-img-title">
        </div>
        <div class="header-img-right">
        </div>
    </div>
</div>