三张图片作为banner图，防止变形

三张图片作为banner图，防止变形
html

	<div class="rbd-banner-left"></div>
    <div class="rbd-banner-middle"></div>
    <div class="rbd-banner-right"></div>

css

.rbd-banner {
  position: relative;
  display: flex;
  padding-top: 36px;
  justify-content: center;
  flex: 1;
  height: 300px;
  background: linear-gradient(180deg, #e1f6ff, #ade6ff);
}
.rbd-banner-middle{
  background:url('../../../assets/images/common/banner-center.png')center bottom no-repeat;
  background-size:contain;
  width:100%;
}
.rbd-banner-left{
  width: 100%;
  height:100%;
  background:url('../../../assets/images/common/banner-left.png')bottom left no-repeat;
  background-size:contain;
  position:absolute;
  top: 0;
  left:0;
}
.rbd-banner-right{
  width: 100%;
  height:100%;
  background:url('../../../assets/images/common/banner-right.png')bottom right no-repeat;
  background-size:contain;
  position:absolute;
  top: 0;
  right:0;
}

主要思路：按照中间图片居中，自适应。傍边两张图片定位到两边，保证每一张图片100%，按照图片大小放入。当然中间的图片会存在被遮挡一部分，但是没有关系。