스킨 페이지에서 이미지를 불러올 때, 이미지 여백이 많이 남습니다.

bismute 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2014.06.26 13:05:31 4179 (112.♡.♡.76)

본문

스킨 페이지에서 이미지를 불러올 때,


<!-- 게시판 목록 시작 -->
<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 이하가 되면, 이미지 여백이 많이 남습니다.

이런 현상이 발생하는데 원인이 무엇인지 몰라서 도움을 얻기 위해 이렇게 글을 올려봅니다


<?
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>
<? } ?>
<!-- 게시판 목록 끝 -->