JSFiddle - React, Tailwind, and code Playground

HTML

<header class="swiper-container">
      <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="slide" src="https://cranmoremtlodge.files.wordpress.com/2008/09/fall-foliage-003.jpg" />
            </div>
    </header>

CSS

.swiper-slide {
  width: 1664px; /*assigned as element style by swiper*/
	position:relative;
  padding-bottom:44%;
  overflow: hidden;
}
.swiper-slide .slide {
  position:absolute;
  top:-50%; bottom:-50%;
  margin:auto;
  width: 100%;
  height: auto;
  background: teal;
}
.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.swiper-slide {
    flex-shrink: 0;
    height: 100%;
}