css 左右布局分布

今天一个左右布局的页面写了我半天，用组件也好、flex也好，实现的都不是我想要的，然后问同事给写了一个也不是我想要的，设计图这样，其实左右有背景图的

用css实现：

      <div class="product-type">
        <div class="proleft">
          <img style="height:710px" :src="require('@/assets/images/pro5.png')" alt=""> 
        </div>
        <div class="proright">
          <img class="pro-img" :src="require('@/assets/images/pro-pro3.png')" alt="">
        </div>
      </div>

css样式：

.product-type{
        width:100%; 
        height: 710px;
        overflow:hidden;
        .proleft{ 
          float:left; 
          width:50%; 
          height: 710px;
          border:1px solid #060;
          text-align: center;
         
        }
        .proright{ 
          float:right;
          width:50%;
          height: 710px;
          text-align: center;
          border:1px solid #00F;
        }
        .pro-img{
          width: auto;
          height: auto;
          text-align: center;
          padding:20% 0 20% 0;
        }
      }

最后页面就是这样,跟随屏幕缩小的时候右边不会压到左边