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

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

한가지 예시를 남깁니다.

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버전 이미지 공간 내에서만 썸네일 출력됩니다.

</p>

<p><style></p>

<p>.outer { position:relative; width:240px; height:400px; overflow:hidden; }</p>

<p>.inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; max-width:auto;}</p>

<p></style></p>

<p><div class="outer">

    <img class="inner" src='이미지경로'>

</div></p>

<p>

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

한가지 예시를 남깁니다.

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버전 이미지 공간 내에서만 썸네일 출력됩니다.

</p>

<p><style></p>

<p>.outer { position:relative; width:240px; height:400px; overflow:hidden; }</p>

<p>.inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100%; max-width:auto;}</p>

<p></style></p>

<p><div class="outer">

    <img class="inner" src='이미지경로'>

</div></p>

<p>

첨언) 썸네일 생성 관련

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

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

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

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

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