컨텐츠 바로가기


스마트디자인 팁 상세
제목 [스마트디자인] 갤러리 게시판의 썸네일 이미지 사이즈 수정하기!
작성자 대표 관리자 (ip:) 작성일 2015-10-15 16:12:13 조회수 4838

갤러리 게시판의 썸네일 이미지 사이즈를 수정하는 방법


갤러리 게시판의 목록이미지 사이즈를 수정하는 방법에 대해 알아보겠습니다.




디자인관리 > 디자인 편집창에서 CSS 수정하기


디자인편집창 > /css/module/board/listPackage_gallary.css 갤러리게시판 썸네일 이미지의 크기를 지정해주는 css파일을 수정합니다.

아래 소스를 참고하여 css 수정으로 이미지의 사이즈를 늘리거나 줄일 수 있습니다. (width : 가로 / height : 세로)


.xans-board-listpackage-8 .xans-board-list-8 li { width:20%; }
/* 한 라인에 노출하고 싶은 갯수만큼 비율을 변경해주세요. (
100%를 기준으로 20%는 5개씩, 25%는 4개씩, 33.3%는 3개씩 나열됩니다.) */

.xans-board-listpackage-8 .xans-board-list-8 li .imgLink img { display:block; width:187px; height:255px; margin:0 auto 10px; border:1px solid #ececec; } /* 이미지의 가로,세로 */






이미지 사이즈 수정 후 올린 이미지가 선명하지 않다면?


업로드한 이미지가, 설정한 화면보다 작을 경우 이미지가 선명하게 보이지 않습니다.

이미지를 큰 사이즈로 올리거나, CSS를 수정하여 해결할 수 있습니다.







※ 게시판관리 > 갤러리게시판 설정 > 자동 리사이징 기능


갤러리 게시판은 목록 이미지의 리사이징 기능을 제공하고 있습니다. 리사이징은 원본 이미지를 설정한 값에 맞게 잘라내는 기능입니다.

리사이징을 사용하는 경우, 위에서 설명한 css의 width, height값과 동일하거나 큰 값으로 설정 값을 넣어야 선명한 이미지로 출력할 수 있습니다.

만약 css에서 지정된 값보다 리사이징 설정한 가로/세로 값의 크기가 작다면 작은 이미지로 들어가게 되어 흐릿한 이미지로 출력될 것입니다.





아래 이미지는 css에 작성된 값과 동일한 가로:187px, 세로:255px 로 리사이징하여 등록한 이미지 입니다.










첨부파일
목록 관리자게시 삭제 수정