메인 슬라이드 문의 드립니다.
본문
고수님들 도움을 좀 받고 싶습니다.
메인 반응형으로 슬라이드를 PC버전1920px x 600px으로 올리면 반응형 모바일에서 비율대로 줄어 이미지가 너무 작게 보입니다.
이런우 PC버전과 모바일 버전의 이미지를 따로 올리면 좋을것 같은데 혹시 비슷한 스킨이나 기능이 있을까요?
답변 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이었나? 아무튼 어느부분이 좀 오류가 있어서 위와 같이 처리했던것
같습니다.