在移动设备上调整横幅图像的大小

Question

我正在创建横幅，我希望这些事情发生。

我希望在每个移动版本上，横幅的每一面都消失20px并换成另一面横幅，我们的横幅有1600x550，每边去除20px会给我们1560，在此之后应该替换为另一面横幅（任何东西）。

这是我的解决方案： HTML：

 <div class="row banner">
      <div class="col-xs-12 main-banner">
        <a href="https://www.seo.com">
          <img src="" alt="main-banner">
        </a>
      </div>
    </div>

横幅：

css

@media (min-width: 320px) and (max-width: 480px) {
    .banner {
        background: url('../images/tako.jpg');
        height: 250px;
        padding: 0px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .main-banner>a>img {
        display: none;
    }

    .products{
        display: flex;
        flex-direction: column;
    }

}

我的解决方案无法正常工作，只是替换移动广告上的横幅，我不知道如何减少每边20px的像素，然后再用另一个横幅替换它，有人可以帮忙吗？