상품상세페이지 이미지 관련
본문
안녕하세요!
홈페이지 혼자서 더듬 더듬 만들고 있습니다.
제품 올리고 상세페이지의 여러 이미지를 올리고
측면의 작은 이미지 클릭 시 크게 보여지는 부분에서
이미지가 아주 흐리게 나오게 되는군요.
작은 사이즈의 리스트 이미지 크기가 68x68 이더군요.
클릭 시 보여지는 이미지는 500x500....
클릭해서 보여지는 이미지를 깨긋하게 보여지게 할려면 어떤 방법이 있느지요?
답변 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으로 불러오니 이미지가 흐려지나 봅니다.
부탁드립니다.
.
원격으로 좀 봐드려도될지요 저녁짬애요
