상품이미지 크기 바꾸는 법
상품이미지의 크기를 바꾸는 방법은
1. 어드민으로 변경하는 법
2. 스마트디자인 편집창에서 css를 수정하는 법
두가지 방법이 있습니다.
1. 어드민에서 변경하는 법
원하는 항목의 이미지 사이즈 변경이 가능하며
원래 값으로 되돌리고 싶을땐 초기값 버튼을 누르면 됩니다.
-product_img03.jpg)
2. 스마트디자인 편집창에서 변경하는 법
스마트디자인 편집창으로
width(넓이)의 숫자를 수정하여 이미지의 사이즈를 늘리거나 줄일 수 있습니다.
css > 모듈(module) > 상품(product) >listmain_1.css ~ listmain_7.css
파일을 열어 아래와 같이 수정해주세요.
.xans-product-1 ul.column4 li.item { width:25%; }
/ * 100%를 기준으로 한 라인에 진열되는 상품이미지의 갯수 (20%는 5개씩, 25%는 4개씩, 33.3%는 3개씩 나열) [상품진열참고 클릭] * / .xans-product-1 ul.column4 li.item .box { width:240px; }/ * 썸네일 이미지를 감싸고 있는 박스의 가로 넓이 * /
.xans-product-1 ul.column4 li.item .thumb { max-width:238px; }/ * 썸네일 이미지의 최대 가로 넓이 * /
.xans-product-1 ul.column5 li.item { width:20%; }
.xans-product-1 ul.column5 li.item .box { width:189px; }
.xans-product-1 ul.column5 li.item .thumb { max-width:187px; }
※ listmain으로 시작하는 CSS 가 없을 경우
스마트디자인 편집창으로
레이아웃(layout) > 기본 레이아웃(basic) > css > ec-base-product.css
파일을 열어 아래 부분에 파란색 코드를 추가해주세요.
.ec-base-product .prdList .thumbnail a img { width:넓이px; height:높이px; max-width:100%; border:1px solid #ececec; box-sizing:border-box; }
/ * 예시) width:200px; height:300px; * /
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Tip. 등록한 이미지가 설정한 사이즈보다 작을 경우 이미지가 선명하게 보이지 않습니다.
그런 경우 큰 사이즈의 이미지로 올리거나, CSS로 이미지 사이즈를 수정하여 해결 할 수 있습니다.
상품이미지 크기가 변경되었습니다.
