답변 3개
저 같은 경우에는 CSS미디어쿼리를 활용하여 PC/MOBILE 이미지를 다르게 표시했습니다.
예를들어 img 태그에 class를 먹여 display 속성으로 컨트롤했습니다.
<img src="aa.jpg" class="pc_img">
<img src="bb.jpg" class="mobile_img">
예) 1200px 이상일땐 mobile_img display:none 이하일땐 pc_img display:none
댓글을 작성하려면 로그인이 필요합니다.
저는 두가지 형태로 작업했었던것 같습니다.
하나는 슬라이드 한개를 사용해서 이미지를 백그라운드로 깔고 background-size를 cover로 줘서
미디어 쿼리로 슬라이드 사이즈 조정해서 보여줬던 방식이 있었구요. 이경우엔
한 이미지로 비율만 조정해서 가운데로 보여주면 괜찮았기때문에 가능했습니다.
다른 하나는 클라이언트가 반응형 사이트지만 pc 모바일 이미지를 따로 업로드 하길 원해서
스크립트로 window size 체크해서 모바일 일 경우 pc 슬라이드 초기화, 모바일 슬라이드 활성화,
반대의 경우 pc 슬라이드 활성화 모바일 슬라이드 초기화,
저는 주로 swiper slide를 많이 사용하는데 단순히 처음부터 둘다 실행하고 display 값으로
보여주고 숨기고 하니 paging이었나? 아무튼 어느부분이 좀 오류가 있어서 위와 같이 처리했던것
같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인