div内的图像，浏览器缩小时切断边

Question

当浏览器缩小时，我的div中的图像仅被右侧切断。我想要实现的是，当浏览器缩小时，图像保持在div内部并且图像的右侧和左侧均匀修剪，这可能吗？任何提示或帮助都是有用的

这是我现在在SASS中的代码：

section.banner{
position: relative;
overflow:hidden;
width: calc(100% - 28px);
height: 492px;
margin: 14px auto;
background-color: grey;
.desktop_banner{
    height: inherit;;
    overflow: hidden;
    .section_1, .section_2, .section_3 {
        height: inherit;
        box-sizing:border-box;
    }
    .section_1 {
        width: 50%;
        float: left;
        margin-right: 1%;
        background-color: yellow;
    }
    .section_2 {
        width: 24%;
        float: left;
        background-color: #00A000;
        margin-right: 1%;
        .top_section{

        }
        .bottom_section{

        }
    }
    .section_3 {
        width: 24%;
        float: left;
        background-color: pink;
    }
}
}

HTML：

<section class="banner">
<div class="desktop_banner">
    <div class="section_1">
        <img src="image.jpg" alt="">
    </div>
    <div class="section_2">
        <div class="top_section">
            <img src="image.jpg" alt="">
        </div>
        <div class="bottom_section">
            <img src="image.jpg" alt="">
        </div>
    </div>
    <div class="section_3">
        <img src="image.jpg" alt="">
    </div>
</div>