스킨 페이지에서 이미지를 불러올 때, 이미지 여백이 많이 남습니다. 채택완료
Copy
<!-- 게시판 목록 시작 --><table width="<?=$width?>" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="800" border="0" cellpadding="0" cellspacing="0" align="center" > <tr> <td width="800" height="$adj_height" Style="background:#fff;" id="contents"><img class="main_img" src="<?=$list[0][file][0][path]?>/<?=$list[0][file][1][file]?>" width="800" id="main_img" style="vertical-align:top;"></td> </tr></table>
위와 같이 코딩을 하게 되는데, 높이가 1000px이상인 이미지는 문제가 되지 않는데
높이가 1000px 이하가 되면, 이미지 여백이 많이 남습니다.

이런 현상이 발생하는데 원인이 무엇인지 몰라서 도움을 얻기 위해 이렇게 글을 올려봅니다
Copy
<?if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가 // 선택옵션으로 인해 셀합치기가 가변적으로 변함//$colspan = 9;if ($is_category) $colspan++;if ($is_checkbox) $colspan++;if ($is_good) $colspan++;if ($is_nogood) $colspan++;// 제목이 두줄로 표시되는 경우 이 코드를 사용해 보세요.// <nobr style='display:block; overflow:hidden; width:000px;'>제목</nobr>?><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style type="text/css">.blue{color:blue;font-weight:bold;}.high{ color: aqua;}td.entitle:active {color: #fd9b07}td font.dandy:active {color: #fd9b07}td font.dandy:visited {color: #fd9b07}font.dandy:focus {color: #fd9b07}font.dandy:link {color: black}font.dandy:active {color: #fd9b07}.cls0{color: red};.cls1{color: black};.cls2{color: blue};.cls3{color: green};</style><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td height=10></td></tr></table><!-- 제목 --><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><form name="fboardlist" method="post"><input type="hidden" name="bo_table" value="<?=$bo_table?>"><input type="hidden" name="sfl" value="<?=$sfl?>"><input type="hidden" name="stx" value="<?=$stx?>"><input type="hidden" name="spt" value="<?=$spt?>"><input type="hidden" name="page" value="<?=$page?>"><input type="hidden" name="sw" value=""><? if ($is_admin) { ?><tr><td height=30 colspan='<?=$board[bo_gallery_cols]?>' style='padding-left:20px;'><INPUT onclick="if (this.checked) all_checked(true); else all_checked(false);" type=checkbox> 전체선택</td></tr><? } ?><tr><?for ($i=0; $i<count($list); $i++) { $title = "자세히보기"; $content = cut_str(get_text($list[$i][wr_content]), 180); $subject = cut_str(get_text($list[$i][subject]), 100, '...'); $img_width = '160'; // 이미지 개당 가로크기 $img_height = '120'; // 이미지 개당 세로크기 $img = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]); $img2 = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][1][file]); $adj_height = $list[$i][file][1][image_height]; $adj_index = $list[$i][wr_id]; if (!file_exists($img) || !$list[$i][file][0][file]) $img = "$board_skin_path/img/no_image.gif"; if ($is_admin) $view_href = "$g4[bbs_path]/board.php?bo_table=$bo_table&wr_id={$list[$i][wr_id]}"; else $view_href = "#"; $checkbox = ""; if ($is_checkbox) $checkbox = "<input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'>"; $tr = ""; if ($i && $i%$board[bo_gallery_cols]==0) $tr = "</tr><tr>"; echo "$tr"; echo <<<HEREDOC <td width="{$td_width}%" valign="top" align="center" ><table width="200" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <img src="{$img}" width='{$img_width}' height='{$img_height}' border="0" title="$title" style="border:0px solid #000000;cursor:pointer;" class="test" onClick="view_img2('$img2','$adj_height')" data-param="$i"> </td> </tr> <tr> <td align="center" class="test2" style="cursor:pointer;" onClick="view_img2('$img2','$adj_height', '$adj_index')" data-param="$i">{$checkbox} <font id="dandy$i" class="dandy" value="$i" data-param="$i">{$subject}</font></td> </tr></table> </td>HEREDOC;}// 나머지 td 를 채운다.if ($i == 0) echo "<td colspan='$board[bo_gallery_cols]' height=50 align=center>게시물이 없습니다.</td>";?></form></tr></table><!-- 분류 셀렉트 박스, 게시물 몇건, 관리자화면 링크 --><table width="100%" border="0" cellpadding="1" cellspacing="0" style='border-top:1px solid #ffffff;border-bottom:1px solid #cccccc;'><tr height="28"> <? if ($is_category) { ?><form name="fcategory" method="get"><td width="50%"><select name=sca onchange="location='<?=$category_location?>'+this.value;"><option value=''>전체</option><?=$category_option?></select></td></form><? } ?> <? if ($is_admin) { ?><td align="right">게시물 <?=number_format($total_count)?>건</td><? } ?></tr></table><!-- 페이지 --><table width="100%" cellspacing="0" cellpadding="0"><tr> <td height="37" align="center" background="<?=$board_skin_path?>/img/number_line.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" align="center"> <? if ($prev_part_href) { echo "<a href='$prev_part_href'><img src='$board_skin_path/img/btn_search_prev.gif' width=54 height=18 border=0 align=absmiddle title='이전검색'></a>"; } ?> <? // 기본으로 넘어오는 페이지를 아래와 같이 변환하여 이미지로도 출력할 수 있습니다. //echo $write_pages; $write_pages = str_replace("처음", "<img src='$board_skin_path/img/begin.gif' border='0' align='absmiddle' title='처음'>", $write_pages); $write_pages = str_replace("이전", "<img src='$board_skin_path/img/prev.gif' border='0' align='absmiddle' title='이전'>", $write_pages); $write_pages = str_replace("다음", "<img src='$board_skin_path/img/next.gif' border='0' align='absmiddle' title='다음'>", $write_pages); $write_pages = str_replace("맨끝", "<img src='$board_skin_path/img/end.gif' border='0' align='absmiddle' title='맨끝'>", $write_pages); $write_pages = preg_replace("/<span>([0-9]*)<\/span>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:#797979\">$1</font>", $write_pages); $write_pages = preg_replace("/<b>([0-9]*)<\/b>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:orange;\">$1</font>", $write_pages); ?> <strong><?=$write_pages?></strong> <? if ($next_part_href) { echo "<a href='$next_part_href'><img src='$board_skin_path/img/btn_search_next.gif' width=54 height=18 border=0 align=absmiddle title='다음검색'></a>"; } ?> </td> </tr> </table></td></tr></table><!-- 버튼 링크 --><div class="board_button"> <div style="float:left;"> <? if ($list_href) { ?> <a href="<?=$list_href?>"><img src="<?=$board_skin_path?>/img/btn_list.gif" align="absmiddle" border='0'></a> <? } ?> <? if ($is_checkbox) { ?> <a href="javascript:select_delete();"><img src="<?=$board_skin_path?>/img/btn_select_delete.gif" align="absmiddle" border='0'></a> <a href="javascript:select_copy('copy');"><img src="<?=$board_skin_path?>/img/btn_select_copy.gif" align="absmiddle" border='0'></a> <a href="javascript:select_copy('move');"><img src="<?=$board_skin_path?>/img/btn_select_move.gif" align="absmiddle" border='0'></a> <? } ?> </div> <div style="float:right;"> <? if ($write_href) { ?><a href="<?=$write_href?>"><img src="<?=$board_skin_path?>/img/btn_write.gif" border='0'></a><? } ?> </div> </div> </td></tr></table><!-- 게시판 목록 시작 --><table width="<?=$width?>" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="800" border="0" cellpadding="0" cellspacing="0" align="center" > <tr> <td width="800" height="$adj_height" Style="background:#fff;" id="contents"><img class="main_img" src="<?=$list[0][file][0][path]?>/<?=$list[0][file][1][file]?>" width="800" id="main_img" style="vertical-align:top;"></td> </tr></table><script language="JavaScript">if ("<?=$sca?>") document.fcategory.sca.value = "<?=$sca?>";if ("<?=$stx?>") { document.fsearch.sfl.value = "<?=$sfl?>"; document.fsearch.sop.value = "<?=$sop?>";}function view_img2(img2, hh, adj_index){ document.getElementById("main_img").src = img2; $('#main_img').css('height',hh); //가로는 800고정, 높이를 원본으로 할 때// $('#main_img').css({'width':ww,'height':hh}); //가로 세로 모두 원본크기로 변경할 때 //선택된 index값과 비교해서 Class를 추가하는 루틴이 필요하다. //alert(adj_index); //adj_index는 현재 선택한 값}var g_a = "";$(document).ready(function(){ $(".test").click( function() { // test라는 클래스 클릭시.. var parm = $(this).attr("data-param"); //alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고... var a = "#dandy"+parm; // id var b = "#dandy"+g_a; // 전역변수에 저장한 id if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행 $(b).css("color","black"); // 해당 id에 width를 100으로 수정.. $(b).css("font-weight","normal"); } $(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정.. $(a).css("font-weight","bold"); g_a = parm; // 전역변수에 클릭한 값을 저장 }); $(".test2").click( function() { // test라는 클래스 클릭시.. var parm = $(this).attr("data-param"); //alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고... var a = "#dandy"+parm; // id var b = "#dandy"+g_a; // 전역변수에 저장한 id if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행 $(b).css("color","black"); // 해당 id에 width를 100으로 수정.. $(b).css("font-weight","normal"); } $(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정.. $(a).css("font-weight","bold"); g_a = parm; // 전역변수에 클릭한 값을 저장 });});</script><? if ($is_checkbox) { ?><script language="JavaScript">function all_checked(sw){ var f = document.fboardlist; for (var i=0; i<f.length; i++) { if (f.elements[i].name == "chk_wr_id[]") f.elements[i].checked = sw; }}function check_confirm(str){ var f = document.fboardlist; var chk_count = 0; for (var i=0; i<f.length; i++) { if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked) chk_count++; } if (!chk_count) { alert(str + "할 게시물을 하나 이상 선택하세요."); return false; } return true;}// 선택한 게시물 삭제function select_delete(){ var f = document.fboardlist; str = "삭제"; if (!check_confirm(str)) return; if (!confirm("선택한 게시물을 정말 "+str+" 하시겠습니까?\n\n한번 "+str+"한 자료는 복구할 수 없습니다")) return; f.action = "./delete_all.php"; f.submit();}// 선택한 게시물 복사 및 이동function select_copy(sw){ var f = document.fboardlist; if (sw == "copy") str = "복사"; else str = "이동"; if (!check_confirm(str)) return; var sub_win = window.open("", "move", "left=50, top=50, width=396, height=550, scrollbars=1"); f.sw.value = sw; f.target = "move"; f.action = "./move.php"; f.submit();}</script><? } ?><!-- 게시판 목록 끝 -->
답변 1개
채택된 답변
+20 포인트
11년 전
자바스크립트 바로 위에 테이블이 2개인데 닫는 태그가 하나 없네요
</td></tr></table>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
bismute
11년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
공통함수쪽이나...board.php에서 불러올 때 값이 없는지를 아무래도 체크해봐야 되겠네요.