갤러리 게시판 가로 길이가 PC와 모바일에서 동등하게 나오니까 모바일에서 축소되어 안나오고 옆으로 페이지가 밀려나갑니다.
본문
http://smedi.kr/daegyo/bbs/board.php?bo_table=photo
PC에서 div구조 넓이가 640px로 딱 맞게 나옵니다.
하지만 갤러리 게시판을 만들고 모바일에서 보니까 그대로 640px로 나와서 전혀 위치나 구조가 맞지 않습니다.
div 구조는 100%와 max로 640px으로 맞췄으나 모바일에서 여전히 이미지 사이즈가 그대로나와서
사이즈가 맞지 않고 이미지사이즈를 어찌 변형해야할지 모르겠습니다.
어떻게 잡아줘야 PC는 딱그대로 나오고 모바일에서는 축소 되어지는지 잘 이해가 가지 않습니다.
모바일에서도 이미지가 줄어들어서 가로 3개 딱 요렇게 한화면에 가지런히 정렬되어 나왔으면 좋겠습니다.
아래는 list.skin 소스의 부분입니다. 한번 살펴봐 주세요.
<!-------------list.skin 시작부분
<div style="width:100%; max-width:640px; margin:0 auto;" >
<link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
<h2 id="container_title_photo">
<?php echo $board['bo_subject'] ?>
<span class="sound_only"> 목록</span>
</h2>
<div id="title_total">
<ul>
<li>
<?php if ($is_checkbox) { ?>
<label for="chkall" class="sound_only">현재 페이지 게시물 전체</label>
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
<?php } ?>
<span>Total <b><?php echo number_format($total_count) ?></b> 건</span>
<font><?php echo $page ?></font> 페이지
</li>
</ul>
</div>
<!-- 게시판 목록 시작 { -->
<div id="bo_gall" style="width:<?php echo $width; ?>">
<?php if ($is_category) { ?>
<nav id="bo_cate">
<h2><?php echo $board['bo_subject'] ?> 카테고리</h2>
<ul id="bo_cate_ul">
<?php echo $category_option ?>
</ul>
</nav>
<?php } ?>
<form name="fboardlist" id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">
<ul id="gall_ul" >
생략---------->
<!------이미지 구간 시작
<ul class="gall_con" style="margin:0 0px 0 30px;">
<li class="gall_href">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
if ($list[$i]['is_notice']) { // 공지사항 ?>
<strong style="width:<?php echo $board['bo_gallery_width'] ?>px;height:<?php echo $board['bo_gallery_height'] ?>px">공지</strong>
<?php } else {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
} else {
$img_content = "<img src='".$board_skin_url."/img/no_image.png' align='absmiddle' border='0'>"; //NO_IMAGE 출력
}
echo "<div style='height:124px;'>";
echo $img_content;
echo "</div>";
}
?>
</a>
</li>
