컨텐츠몰 특별할인 9월1일~12월31일

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

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
썸네일 문제점 해결방법좀 알려주세요

QA

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

본문

3420736118_1596701465.1353.png

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

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

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

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 2

채택됨

사랑해듀오k님의 답변

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

한가지 예시를 남깁니다.

 

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>

 

첨언) 썸네일 생성 관련

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

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

 

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

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

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

주소복사
채택됨
답변의 댓글

마젠토님의 답변

CSS 관련은 실제 좌표가 있어야 답변 받기가 편합니다. 아무리 고수라도 첨부된 사진 가지고 원인 찾기에는..

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 91,532 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.09.23 19:57 종료20.09.30 19:57

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

© SIRSOFT