[CSS] 반응형 슬라이더 배너

이미지의 비율을 유지한 상태에서 슬라이더를 만들기 위하여 어떻게 해야하는지 알아보자

    <section>
      <h2 hidden>Banner Event</h2>
      <Swiper
        pagination={{ clickable: true }}
        modules={[Navigation, Pagination, Autoplay]}
        className={css.mainSlider}
      >
          <SwiperSlide >
            <div className={css.imgWrap}>
              <img src='' alt='' />
            </div>
            <div className={css.textWrap}>
              <p className={css.title}>제목</p>
              <p className={css.desc}>설명</p>
              <Link to={item.link} className={css.more}>
                View Product
              </Link>
            </div>
          </SwiperSlide>
      </Swiper>
    </section>
  )
}

.imgWrap {
  padding-top: 40%;
  overflow: hidden;
  border-radius: var(--fs16);
  border: 1px solid red;
  position: relative;
}

여기서 가장 중요하게 봐야 할 점은 padding-top:40%이다. padding-top을 저렇게 주면 부모 너비(width) 기준 % 계산으로 반응형 비율 고정이 가능하다.
position:relative는 자식 요소인 img의 position을 absolute로 하기위하여 설정하였다. 또한 overflow:hidden을 이용해 비율을 유지하며 벗어가는 부분은 안보이도록 하였다.

.imgWrap img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

주어진 wrap에 꽉 채우도록 구성하였다. object-fit :cover를 이용하여 비율은 유지하며 박스를 꽉 채워줬다. 잘리는 부분은 있을 수 있다.

aspect-ratio

요소의 가로와세로의 비율을 지정하는 Css 속성이다.

.imgWrap {
  aspect-ratio: 5 / 2.0; /* 가로:세로 비율 (예: 5:2) */
  overflow: hidden;
  border-radius: var(--fs16);
  border: 1px solid red;
}

.imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

이렇게 해도 똑같이 나오게 된다.