썸네일 문제점 해결방법좀 알려주세요

썸네일 문제점 해결방법좀 알려주세요

QA

썸네일 문제점 해결방법좀 알려주세요

본문

3420736118_1596701465.1353.png

PC버전 썸네일이 조금 잘려서 나오는데 사진은 1600X1600 입니다 폭이랑  높이를 2000으로 줬는데도 짤리네요 전체 목록에 들어가면 안짤리고 잘나오고

모바일 버전은 폭이랑 넓이를 600X400으로 줬는데 썸네일이 위와같이 잘리고 전체로 들어가면 잘보이는데 문제점이 너무 크게 보인다는 점입니다.

혹시 해결법아시는분은 답변 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 2

질문에 대한 해결책은 여러 방법으로 구현 가능합니다,

한가지 예시를 남깁니다.

 

1) 모바일 썸네일 ratio 비율확인

먼저 모바일 버전에서 썸네일 생성토록 설정하신 ratio 비율을 확인해야 합니다.

관리자 > 게시판관리 > 해당 게시판 수정버튼 클릭 > '디자인/양식 탭' 에서

모바일 갤러리 이미지 폭, 모바일 갤러리 이미지 높이 를 확인합니다.

 

썸네일이 픽셀로 깨지는 것을 방지하기 위하여 각 값에 x 2 또는 x2.5 정도 계산한 뒤,

PC 버전 썸네일 속성인 갤러리 이미지 폭, 갤러리 이미지 높이 쪽으로 값을 넣고 '확인' 버튼을 클릭.

 

2) 소스코드 수정

다음으로 사용하시는 스킨에서 썸네일 출력되는 소스코드 위치를 찾으셔야 합니다.

 

2-1) PC버전 썸네일 출력코드 css 속성값에

position:relative; width:원하시는 가로폭;height:원하시는 세로폭; overflow:hidden;

→ 지정하신 사이즈를 오버할 경우 숨김처리.

 

2-2) PC버전 썸네일 img css 속성값에 

position:absolute; top:50%; left:50%; transform:translate(-50%, -50%; height:100%; max-width:auto;

또는

position:absolute; top:50%; left:50%; transform:translate(-50%, -50%; transform:scale(0.8) 응용;

→ 썸네일 이미지 출력을 height 높이 기준으로 처리하거나 scale 속성을 이용하여 0.8배로 리사이징.

위와같이 처리하면 설정하신 PC버전 이미지 공간 내에서만 썸네일 출력됩니다.

 


<style>
.outer { position:relative; width:240px; height:400px; overflow:hidden; }
.inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; max-width:auto;}
</style>
<div class="outer">
    <img class="inner" src='이미지경로'>
</div>

 

질문에 대한 해결책은 여러 방법으로 구현 가능합니다,

한가지 예시를 남깁니다.

 

1) 모바일 썸네일 ratio 비율확인

먼저 모바일 버전에서 썸네일 생성토록 설정하신 ratio 비율을 확인해야 합니다.

관리자 > 게시판관리 > 해당 게시판 수정버튼 클릭 > '디자인/양식 탭' 에서

모바일 갤러리 이미지 폭, 모바일 갤러리 이미지 높이 를 확인합니다.

 

썸네일이 픽셀로 깨지는 것을 방지하기 위하여 각 값에 x 2 또는 x2.5 정도 계산한 뒤,

PC 버전 썸네일 속성인 갤러리 이미지 폭, 갤러리 이미지 높이 쪽으로 값을 넣고 '확인' 버튼을 클릭.

 

2) 소스코드 수정

다음으로 사용하시는 스킨에서 썸네일 출력되는 소스코드 위치를 찾으셔야 합니다.

 

2-1) PC버전 썸네일 출력코드 css 속성값에

position:relative; width:원하시는 가로폭;height:원하시는 세로폭; overflow:hidden;

→ 지정하신 사이즈를 오버할 경우 숨김처리.

 

2-2) PC버전 썸네일 img css 속성값에 

position:absolute; top:50%; left:50%; transform:translate(-50%, -50%; height:100%; max-width:auto;

또는

position:absolute; top:50%; left:50%; transform:translate(-50%, -50%; transform:scale(0.8) 응용;

→ 썸네일 이미지 출력을 height 높이 기준으로 처리하거나 scale 속성을 이용하여 0.8배로 리사이징.

위와같이 처리하면 설정하신 PC버전 이미지 공간 내에서만 썸네일 출력됩니다.

 


<style>
.outer { position:relative; width:240px; height:400px; overflow:hidden; }
.inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; max-width:auto;}
</style>
<div class="outer">
    <img class="inner" src='이미지경로'>
</div>

 

첨언) 썸네일 생성 관련

그누보드 소스파일 뜯어보시면 썸네일 추출하는 로직이 있습니다.

센터 기준으로 썸네일 생성되는데 현재 그누보드에는 업로드되는 모든 비율의 이미지에 알맞는 썸네일을 자동 생성하는 기능이 없습니다.

 

업로드시 썸네일 최적비율로 자동 생성되기를 원하실 경우 의뢰를 통해서만 해결 가능하며,

웹사이트에서 사용하실 썸네일 표준 사이즈를 정한 뒤 위와같이 후처리 하는것이 원만한 해결책 입니다.

가상 쉬운 해결법은 원본 이미지를 포토샵 등으로 리사이징 처리한 뒤 업로드 하는것입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 818
QA 내용 검색
filter #DB ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT