상품상세페이지 이미지 관련

상품상세페이지 이미지 관련

QA

상품상세페이지 이미지 관련

답변 3

본문

안녕하세요!

 

홈페이지 혼자서 더듬 더듬 만들고 있습니다.

제품 올리고 상세페이지의 여러 이미지를 올리고

측면의 작은 이미지 클릭 시 크게 보여지는 부분에서

이미지가 아주 흐리게 나오게 되는군요.

작은 사이즈의 리스트 이미지 크기가 68x68 이더군요.

클릭 시 보여지는 이미지는 500x500....

클릭해서 보여지는 이미지를 깨긋하게 보여지게 할려면 어떤 방법이 있느지요?

 

2039451423_1585479172.442.jpg

이 질문에 댓글 쓰기 :

답변 3

원본 이미지가 작아서 크게 생성되면 어쩔수가 없습니다.

클릭시 이미지를 줄이시거나 올릴때 큰이미지로 올리셔야 합니다.

관리자에서 상품 카테고리 내부 항목중에 이미지 사이즈를 원본크기와 동일하게 하시거나
../theme/선택테마/skin/shop/basic/style.css
에서 선택하신 리스트스킨의 스타일에서 Big image 사이즈를 조정 해보세요

답변에 말씀해 주신 style.css의 내용이

@charset "utf-8";

/* 리스트 공통 */
.lists-row{margin-right:-10px;margin-left:-10px}
.lists-row .col-row-0,.lists-row .col-row-1,.lists-row .col-row-2,.lists-row .col-row-3,.lists-row .col-row-4,.lists-row .col-row-5,.lists-row .col-row-6,.lists-row .col-row-7,.lists-row .col-row-8,.lists-row .col-row-9,.lists-row .col-row-10{position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0;}
.lists-row .col-row-0,.lists-row .col-row-1{width:100%}
.lists-row .col-row-2{width:50%}
.lists-row .col-row-3{width:33.33333333%}
.lists-row .col-row-4{width:25%}
.lists-row .col-row-5{width:20%}
.lists-row .col-row-6{width:16.66666667%}
.lists-row .col-row-7{width:14.28571428%}
.lists-row .col-row-8{width:12.5%}
.lists-row .col-row-9{width:11.11111111%}
.lists-row .col-row-10{width:10%}
.row-clear{clear:both!important}
.lists-row .sct_img img{max-width:100%;height:auto}

/* aside:gnb */
#gnb {margin-bottom:15px;background:#fff;border:1px solid #e8e8e8;border-top:0}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.gnb_1dli {position:relative;word-wrap:break-word}
.gnb_1dli_on {color:#fff;text-decoration:none}
.gnb_1da {display:block;padding:0 20px;line-height:48px;color:#010101;text-decoration:none;font-size:1.167em}
.gnb_1da i {position:absolute;right:0;top:0;display:inline-block;color:#c4c4c4;padding:15px;font-size:1.45em}

.gnb_1dam {background:url('img/gnb_bg.png') center right no-repeat}
.gnb_1dli_on .gnb_1da {background-color:#f5f5f5;color:#3a8afd;font-weight:bold;text-decoration:none}
.gnb_1dli_on .gnb_1da:after {position:absolute;left:-1px;top:0;content:"";background:#3a8afd;width:3px;height:100%}

.gnb_1dli_on .gnb_1dam {text-decoration:none}
.gnb_2dul {display:none;z-index:1000;position:absolute;border:1px solid #e8e8e8;padding:10px}
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:inline-block;top:0;left:263px;width:200px;background:#fff}
.gnb_1dli_over .gnb_2dul:after, .gnb_1dli_over2 .gnb_2dul:after {content:"";position:absolute;top:10px;left:-6px;display:inline-block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #fff}
.gnb_1dli_over .gnb_2dul:before, .gnb_1dli_over2 .gnb_2dul:before {content:"";position:absolute;top:9px;left:-7px;display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #e8e8e8}

.gnb_2da {}
.gnb_1dli_over .gnb_2da {display:block;padding:5px 10px;line-height:20px;font-size:1.083em}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none;color:#3a8afd}

하단부분 자름요.
수정해야 할 부분이 상단의 내용인 것은 알겠는데
어디를 고쳐야 할지 모르겠습니다.

이미지를 500x500으로 다시 올려 보아도
섬네일이 만들어지면서 150x150으로 자동생성이 되고
그 이미지를 500x500으로 불러오니 이미지가 흐려지나 봅니다.
부탁드립니다.


.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 24
© SIRSOFT
현재 페이지 제일 처음으로