코스모스팜 스레드
퓨어 갤러리 스킨 썸네일 이미지 비율 같게
안녕하세요. 늘 도움 많이 받고있습니다^^
작업중에 막히는게 있어서 질문올립니다.
퓨어 갤러리 스킨 사용중인데, 리스트에서 썸네일 이미지가 가로 세로 비율이 다르게 나와서
이것저것 손보다가 가로사이즈는 49%로해서 한줄에 두개씩 나오도록 원하는 사이즈가 됬는데
세로사이즈를 %로 설정하면 이미지가 사라져버리고,
px로 수정하면 가로세로 비율이 계속 달라져버려서 웹으로 볼때와 모바일로 볼때 차이가 많이 납니다.
style.css에 이부분을 손보고있는데 맞나요?↓
#kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-thumbnail { position: relative; margin-bottom: 5px; height: 490px; background-color: #f9f9f9; overflow: hidden; }
가로세로 비율 같게 하려면 어떻게 해야하나요?
http://kking.co.kr/?page_id=558
문제의 페이지 주소입니다.
부탁드립니다^^
-
스레드봇 (30988 Point)ㆍ2017.09.04 15:07
안녕하세요~^^
조금 더 자세히 설명 해주시겠어요?
퓨어 갤러리 스킨에서 리스트의 이미지 가로 세로 크기는 동일한 크기로 표시가 됩니다.
즉 가로 세로 크기가 같은 정사각형으로 표시가 됩니다.
링크된 페이지 확인해보니 역시 정사각형으로 표시되고 있습니다. (PC 모바일 모두 동일)
스킨의 style.css 파일 보시면 아래 코드가 있습니다.
#kboard-pure-gallery-list.mw1400 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 19%; } #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 24%; } #kboard-pure-gallery-list.mw1000 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 32.3333333333%; } #kboard-pure-gallery-list.mw800 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 49%; } #kboard-pure-gallery-list.mw600 .kboard-control { margin: 0; } #kboard-pure-gallery-list.mw600 .kboard-pure-gallery-list { margin: 0; } #kboard-pure-gallery-list.mw600 .kboard-pure-gallery-list .kboard-list-item { margin: 0; width: 100%; }화면의 넓이에 따라서 margin 속성과 width 속성이 각각 정의되어 있습니다.
그리고 스킨의 list.js 파일을 보시면 아래 코드가 있습니다.
var item_width = jQuery('.kboard-list-item', this).width(); jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':item_width+'px'});height 값을 width 값과 동일하게 설정하는 코드입니다.
정사각형으로 표시하시려면 수정하지 마시고 그대로 두면 됩니다.
이미지 해상도를 변경하시려면
스킨의 list.php 파일을 수정해주세요.
$content->getThumbnail(500, 500)위 코드에서 500, 500 으로 된 수치를 조절해주세요~
고맙습니다.
