怎么让div里面的图片自适应

问题：轮播图div的宽度会随着屏幕的变大而变大，怎么让里面的图片自适应？

设计稿轮播图尺寸是：1604*160

css:

.swiper-container {
    width: 100%;
    max-height: 160px;
    .swiper-pagination{
      .swiper-pagination-bullet{
        width: 64px;
        height: 6px;
        background: #fff;
        border-radius: 3px;
        opacity: .6;
      }
      .swiper-pagination-bullet-active{
        opacity: 1;
      }

    }
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 100%;
      height: auto;
    }
  }

通过设置：父容器100%的宽度，max-height:160px;里面的图片：width:100%,height:auto

效果图：