解决图片在不同屏幕自适应按比例缩小问题

div代码

                <Carousel afterChange={() => this.onChange()} ref='img' effect={'fade'}>
                    <div className={styles.wrapBox}>
                        <img src={preIcon} />
                    </div>
                    <div className={styles.wrapBox}>
                        <img src={preIcon2} />
                    </div>
                </Carousel>

样式代码
判断不同屏幕下图片的尺寸

  @media screen and (min-width: 1920px) {
    .bigWrapBox{
      background-color: red;
    }
    :global{
      .ant-carousel{
        width: 1614px !important;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }

@media screen and (min-width: 1680px) and (max-width: 1920px) {
  .bigWrapBox{
    background-color: green;
  }
  :global{
    .ant-carousel{
      width: 1400px !important;
      margin: 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}

@media screen and (min-width: 1600px) and (max-width: 1680px) {
  .bigWrapBox{
    background-color: pink;
  }
  :global{
    .ant-carousel{
      width: 1250px !important;
      margin: 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .bigWrapBox{
    background-color: purple;
  }
  :global{
    .ant-carousel{
      width: 1100px !important;
      margin: 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .bigWrapBox{
    background-color: skyblue;
  }
  :global{
    .ant-carousel{
      width: 800px !important;
      margin: 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}