웹진갤러리 반응형 스킨에 썸네일 사이즈 변경
본문
현재 이 스킨을 사용하고 있습니다.
그런데 썸네일의 크기를 px로 정해져 있어서 PC에서 사이즈가 맞으면 모바일에서 안맞고 모바일에서 맞으면 PC에서 안맞는 불편함이 있어서 사이즈를 %로 바꾸고 싶습니다.
현재 latest.skin.php 에
if ($options) list($width, $height, $wrap_width, $content_length) = explode(',', $options);
if (!$width) $width = 300;
if (!$height) $height = 250;
if (!$content_length) $content_length = 120;
이렇게 되어있습니다. 이것을 픽셀이 아닌 %로 바꿀수 있는 방법이 있을까요??
답변 3
일단, 스킨은 들여다보지 않았습니다.
갤러리형 스킨에서 너비와 높이를 지정하는 이유가 썸네일 추출시에 이미지 크기를 정하기 위해서인데요.
기본적인 반응형이미지의 형태는 이미지 자체의 너비와 높이를 정하지 않고(혹은, 부모요소 너비변화에 따른 최대 이미지크기를 정함), 부모요소의 너비를 유동적으로 변화하는 형태입니다.
관련해서 자세한 내용은 아래글이 도움이 될듯 합니다.
CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기
결론적으로, 이미지의 크기는 부모요소가 가질 최대너비만큼의 너비만큼을 정하는 방식으로 스타일을 재디자인 하시면 됩니다.
(ex. 부모요소의 너비 25% 로, 한줄에 4개씩 나열한다고 치면, 25%일때의 너비값을 픽셀로 얼마인지 계산하시고 그 너비만큼을 이미지의 크기로 지정해줍니다.)
이미지는 반응형을 위해
img {
width: auto !important;
max-width: 100%;
height: auto !important
} 가 필요합니다.
감사합니다^^ 많은 도움이 되었습니다~
이 부분은 저도 궁금한 부분인데 고수님들의 답변을 기다립니다.
해결했습니다 전^^ cubeportfolio.min.css 에서 img에 max-width:100%;를 주고 썸네일을 좀 높게 width를 600으로 height를 500으로 놓으니 제가 원하는 기능이 나왔습니다^^
아...해결하셨군요..
감사합니다..덕분에 저도 알았네요...
