Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

miso-bbs팩 스킨의 이미지 비율 관련 수정 참고

4 레인 3 810 2 0

1. miso-extend-gallery

 

갤러리 내부 에디터로 첨부한 파일(혹은 apms 이전 전에 삽입한 이미지)(Cheditor , geditor 등)이 길쭉하게 나올 경우

 

skin/board/miso-extend-gallery/style.css

 

라인 110 부근

.view-content img { width:auto !important; height:auto !important; max-width:100%; } 

로 임포턴트를 줘서 엘리먼트 자체 스타일 무시하도록 변경

 

-> 해결

 

2. miso-extend-list

 

 네모로 나오는 썸네일 둥글게변경

 

skin/board/miso-extend-list/style.css

 

35라인 부근

 

table.list-tbl .list-img img { width:40px; height:40px;border-radius:20px; }

border-radius를 추가 하여 둥글게 변경(곡률은 썸네일의 반)

 

3. miso-extend-webzine

 

모바일에서 혹은 width가 460px 이하 기기인 경우

 

썸네일이 비율을 무시하고 정사각형으로 나와, 길쭉해지는 경우

 

skin/board/miso-extend-webzine/style.css

 

46라인 부근

 

.list-item .img-fix img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:0px; }

 

 

에서 height:100% 를 제거하여 비율대로 나오게 변경, 

 

.list-item .img-fix img { display:block; position:absolute; top:0; left:0; width:100%;  border:0px; }

 

하지만 이미지 밑에 여백이 있는 이유는

세로 비율인 경우 가리는 현상을 방지하기 위해섭니다.

 

PC버젼에서도 썸네일이 비율대로 나오기 때문에, 조금 지저분하게 보일 수 있습니다.

이것은 운영하시는 싸이트에 따라 , 첨부하시는 이미지 비율이 많은것에따라 달라지니 취향대로 수정하시면 됩니다.

 

 

 

3 Comments
7 작은거인 2015.05.17 13:52  
좋은팁 감사합니다
4 레인 2015.05.29 09:13  
잘 안되는 경우
height:auto !important;
를 주시면 위아래 height가 비율대로 나옵니다.
정말 좋은팁 감사합니다. 잘 배웠습니다. ^^
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory NaverBand