퓨어 갤러리 스킨 썸네일 이미지 비율 같게

안녕하세요. 늘 도움 많이 받고있습니다^^

작업중에 막히는게 있어서 질문올립니다.

 

퓨어 갤러리 스킨 사용중인데, 리스트에서 썸네일 이미지가 가로 세로 비율이 다르게 나와서

이것저것 손보다가 가로사이즈는 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

문제의 페이지 주소입니다.

부탁드립니다^^

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    조금 더 자세히 설명 해주시겠어요?

     

    퓨어 갤러리 스킨에서 리스트의 이미지 가로 세로 크기는 동일한 크기로 표시가 됩니다.

    즉 가로 세로 크기가 같은 정사각형으로 표시가 됩니다.

    링크된 페이지 확인해보니 역시 정사각형으로 표시되고 있습니다. (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 으로 된 수치를 조절해주세요~

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기