swiper.js안에 이미지 관련 질문드립니다.

Question

안녕하세요. 퍼블리셔분의 육아휴직으로 인하여퍼블업무를 땜빵하고 있는 개발자입니다기존에 swipger.js를 활용하여 웹페이지에 swipe영역에 이미지를 노출하고 있었는데개발자 모드로 가로 영역을 줄이면 이미지 사이즈는 그대로 있고이미지 사이즈가 resize가 안되는거 같습니다class를 활용해서 width는 auto로 주고 height는 260px로 고정을 해주었고img 태그는 100%로 설정 했는데 이미지 사이즈가 안되네요어느 부분을 수정해줘야할지 잘 모르겠습니다소스는 아래쪽에 올려놓겠습니다.HTML 부분

CSS 부분 .swiper-container{width:100%;height:260px;cursor:pointer;} .swiper-slide{ background-size: cover; background-position: 50%; max-height: 260vmax; align-items: center; /* 위아래 기준 중앙정렬 */ justify-content: center; /* 좌우기준 중앙정렬 */ display: flex; /* 내용을 중앙정렬하기 위해 Flex 사용 */ }Swiper.js 초기화 $(function(){ var swiper = new Swiper(".swiper-container", { loop: true, autoResize: true, autoPlay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true } }); });이렇게 되어 있습니다어떻게 하면 이미지의 사이자가 화면 비율에 맞게 줄어드는지 질문드립니다.

또따라쟁이 · Answer

Class나 stule을 Slide에 넣지 마시고 이미지에 넣어보세요 .. object cover 하시고 object postion 도 img 에.. 핸폰으로 입력이라 코드샘플이 힘드네요

swiper.js안에 이미지 관련 질문드립니다.

1개의 답변

#swiper 목록