코스모스팜 스레드
카드 갤러리 스킨 모바일 섬네일 해상도 관련 문의
안녕하세요.
card-gallery 스킨을 사용하여 게시판을 사용하고 있는데 섬네일 해상도가 원하는 비율이 아니라서
사이즈를 조정해서 사용하고 있습니다.
PC에서는 조정한 사이즈로 문제없이 사용하고 있는데 모바일에서는 이미지가 너무 커져서 외부로 튀어나는 현상이 발생합니다.
이미지를 자동 조정해서 모바일에 맞추어진다고 생각했는데 그렇게 적용되지는 않아서 모바일과 PC를 서로 독립적으로 섬네일의
크기를 지정하고 싶은데 가능할지 문의드립니다.
만약 이게 어렵다면 최소 사이즈를 지정해서 모바일에서는 최소 사이즈로 섬네일이 노출되도록 조정이 되어도 좋습니다.
위 이미지는 모바일 화면 캡쳐 이미지 입니다.
#kboard-card-gallery-list .kboard-list-item { width: 330px; box-sizing: content-box; }
#kboard-card-gallery-list .kboard-list-item .kboard-list-thumbnail { width: 330px; height: 185px; }
@media screen and (max-width: 600px) {
#kboard-card-gallery-list .kboard-list-item { width: 330px; }
#kboard-card-gallery-list .kboard-list-item { margin: 0 1% 1% 0; width: 49%; }
}
위 코드는 섬네일 해상도 조정을 위해 반영한 코드이고 원하는 기본 섬네일 해상도는 width 330px height: 185px 입니다.
원활한 섬네일 반영을 위해 style.css / list.php 2개 파일에도 같은 해상도로 적용을 했습니다.
사이트 주소 : https://korea-dcm.com/
모바일에서도 원하는 해상도를 적용해서 깨지는 부분이 없도록 조정 가능할지 문의드립니다.
감사합니다.
-
스레드봇 (31060 Point)ㆍ2021.02.15 17:33
안녕하세요~^^
모바일에서 게시글 너비를 330px로 고정하면서 영역이 벗어나는 듯합니다.
max-width 속성을 추가해보시겠어요?
기존의 코드 대신 아래의 코드로 교체해보세요.
#kboard-card-gallery-list .kboard-list-item { width: 330px; box-sizing: content-box; } #kboard-card-gallery-list .kboard-list-item .kboard-list-thumbnail { width: 330px; height: 185px; } @media screen and (max-width: 600px) { #kboard-card-gallery-list .kboard-list-item { width: 330px; max-width: 100%; } #kboard-card-gallery-list .kboard-list-item { margin: 0 1% 1% 0; width: 49%; } }고맙습니다.
-
baduk00 (18 Point)ㆍ2021.02.17 14:41
먼저 빠른 답변에 감사드립니다.
수정해 주신 방향으로 적용했는데 모바일에서 달라지는 부분이 없습니다.
아래 이미지처럼 옆으로 이미지가 빠져나오는 문제가 발생해서 어떤 방향으로
수정하면 좋을지 몰라 문의드립니다.
https://imgur.com/a/eMxxJ5b
모바일에 맞추어 최소 크기를 지정해야 하는지 아니면 모바일을 별도 크기로 관리해야 하는지 그게 아니라면 위 주신 의견 처럼 반응형으로 100% 로 해서 반영해야 하는지 의견 부탁드립니다.
감사합니다.
-
스레드봇 (31060 Point)ㆍ2021.02.17 15:07
아래의 CSS 코드도 추가해보시겠어요?
#kboard-card-gallery-list .kboard-list-item .kboard-list-thumbnail { max-width: 100%; }또 별도로 추가하신 아래의 CSS 코드를
#kboard-card-gallery-list .kboard-list-item { margin: 0 1% 1% 0; width: 49%; }아래의 코드로 교체해보시겠어요?
#kboard-card-gallery-list .kboard-list-item { margin: 0 1% 1% 0; }모바일에서는 비교적 표시되는 영역이 좁고 기기에 따라 너비가 다르기 때문에
반응형으로 적용을 해주시는 게 좋을 듯합니다.
고맙습니다.
