게시판 상세
제목 [판당고스킨] 상품상세 이미지 사이즈 조정방법 (P1, P2, P3 무료스킨)
작성자 Fandango (ip:)
  • 작성일 2017-03-30
  • 추천 추천하기
  • 조회수 171
평점 0점

상품상세 이미지 사이즈 조정 방법 문의가 많습니다.


이미지 사이즈 조정 방법입니다.


현재 상품상세 이미지사이즈는 660px 로 돼 있습니다.


전체폭 1100px 에서 60%가 상세이미지, 나머지 40%가 상품 설명 부분으로 할당돼 있습니다.

1100px의 60%가 660px 입니다. 이제 css만 간단히 수정하면 원하시는 사이즈로 조정할 수 있습니다.


단, css 파일을 편집하셔야 합니다.


css 파일 : /설치한스킨/UI_FANDANGO/css/uif_uikit.css


위 css 파일을 열면 200라인 부근에 아래 코드가 있습니다.


/* imgArea */

.UIF_imgArea { float:left; width:60%; margin:0; }

.UIF_imgArea .keyImg { position:relative; width:100%; margin:0 auto; }

.UIF_imgArea .keyImg img { width:100%; cursor:pointer; }




다른거 필요없고 파란색으로 표시된 부분만 원하는 사이즈로 변경하세요.

만약 이미지 가로사이즈를 400px 로 만들고 싶다면 width:100%; 를 width:400px; 로 바꾸시면됩니다.


/* imgArea */

.UIF_imgArea { float:left; width:60%; margin:0; }

.UIF_imgArea .keyImg { position:relative; width:100%; margin:0 auto; }

.UIF_imgArea .keyImg img { width:400px; cursor:pointer; }





이렇게 변경하시면 됩니다.

세로 사이즈는 따로 지정하지 않습니다. 가로 사이즈에 따라 세로사이즈는 자동으로 변환됩니다.


그리고 한가지 더 하셔야 할게 있습니다.

사이즈만 줄이면 이미지가 좌측으로 쏠리게 됩니다.

가운데로 맞추라는 명령어를 하나 더 추가해야 합니다.

이미지 사이즈 변경한 줄 바로 위에 text-align:center; 라고 추가해주시면 됩니다.


/* imgArea */

.UIF_imgArea { float:left; width:60%; margin:0; }

.UIF_imgArea .keyImg { position:relative; width:100%; margin:0 auto; text-align:center; }

.UIF_imgArea .keyImg img { width:400px; cursor:pointer; }



적용하면 위 코드처럼 됩니다.


위 방법을 응용해서 상세페이지 상품이미지를 원하는 사이즈로 변경하실 수 있습니다.


감사합니다.

첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

수정 취소

/ byte

비밀번호 : 확인 취소