갤러리 게시판 썸네일 꽉차게 하는 방법

갤러리 게시판 썸네일 꽉차게 하는 방법

QA

갤러리 게시판 썸네일 꽉차게 하는 방법

본문

fa511fbec66139d37872f710b57db7c2_1471875115_2689.png

 

현재 게시판 상황입니다. 첫번째 이미지 가로가 100% 나오고 세로가 가로에 맞춰서 나옵니다. 설정은 관리자에서 아래와 같이 했습니다. 이미지폭은 정해주고, 갤러리 이미지 높이를 "0"으로 했더니 가로에 맞춰서 세로가 정렬이 되는데~

 

fa511fbec66139d37872f710b57db7c2_1471875115_1521.png
 

하고 싶은것은 현재 상황에서 가로도 100% 세로도 100% 나오게 하고 싶은데~ 갤러리 높이를 수정하면 이미지가 짤려서 나오더라구요~ 혹시 이미지의 폭과 높이를 100% 나오게 하는 방법은 없을까요~?

 

 

 

lisk.skin.php소스는 아래와 같습니다~

 

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

 

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css" media="screen">', 0);

 

 

//전체 배너

if($sca){

$sql = "select * from  ".$write_table." where wr_is_comment = 0 and (wr_4 <= '".date("Y-m-d")."' and wr_5>='".date('Y-m-d')."' ) and ca_name='".$sca."' order by wr_1 desc";

}else{

$sql = "select * from  ".$write_table." where wr_is_comment = 0 and (wr_4 <= '".date("Y-m-d")."' and wr_5>='".date('Y-m-d')."' ) order by wr_1 desc";

}

 

$result = sql_query($sql);

 

$list = array();

$i = 0;

while ($row = sql_fetch_array($result)){

$list[$i] = get_list($row, $board, $board_skin_url, G5_IS_MOBILE ? $board['bo_mobile_subject_len'] : $board['bo_subject_len']);

$i++;

}

 

$total_count = count($list);

 

// 이미지 비율

$thumb_w = $board['bo_'.MOBILE_.'gallery_width'];

$thumb_h = $board['bo_'.MOBILE_.'gallery_height'];

$img_h = apms_img_height($thumb_w, $thumb_h); // 이미지 높이

 

// 너비

$item_w = apms_img_width($board['bo_gallery_cols']);

 

// 간격

$gap_right = ($boset['gap_r'] == "") ? 15 : $boset['gap_r'];

$gap_bottom = ($boset['gap_b'] == "") ? 30 : $boset['gap_b'];

 

$ellipsis = (G5_IS_MOBILE) ? '' : ' class="ellipsis"';

$ellipsis = ($thumb_h > 0) ? $ellipsis : '';

$list_cnt = count($list);

 

 

$sql = "select * from ".$write_table." where mb_id='".$member['mb_id']."' and  wr_is_comment = 0";

$my_banner = sql_fetch($sql);

 

if($my_banner && (date("Y-m-d H:i:s") < $my_banner['wr_4'] || date("Y-m-d H:i:s") >= $my_banner['wr_5'])){

$my_banner['no_img'] = $board_skin_url.'/img/no-img.jpg'; // No-Image

$img = apms_wr_thumbnail($bo_table, $my_banner, $thumb_w, $thumb_h, false, true);

?>

<section>

<div style="padding:10px;background-color:#f5f5f5">

<h3>내 배너 현황</h3>

<table>

<tr>

<td>

<a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&wr_id=<?=$my_banner['wr_id']?>&sca=<?=$ca_name?>">

<img src="<?php echo $img['src'];?>" alt="<?php echo $img['alt'];?>" height="<?=$thumb_h?>">

</a>

</td>

<td style="padding:10px;font-size:20px;font-weight:bold">

<? 

if(!$my_banner['wr_4'] && !$my_banner['wr_4']){

echo "관리자 등록 대기중입니다.";

}else{

if(date("Y-m-d H:i:s") < $my_banner['wr_4']){

echo $my_banner['wr_4']."일에 배너가 노출됩니다.";

}else{

echo "사용기한 종료되었습니다.<br>관리자에게 문의하세요";

}

}

?>

</td>

</tr>

</table>

</div>

</section>

<?  } ?>

 

<section class="board-list<?php echo (G5_IS_MOBILE) ? ' font-14' : '';?>">

 

<?php if($notice_count > 0) include_once($board_skin_path.'/notice.skin.php'); // 공지사항 ?>

<?php if($is_category) include_once($board_skin_path.'/category.skin.php'); // 카테고리 ?>

 

<style>

.list-wrap .list-container { overflow:hidden; margin-right:<?php echo ($gap_right > 0) ? '-'.$gap_right : 0;?>px; margin-bottom:<?php echo ($gap_bottom > 15) ? 0 : 15;?>px; }

.list-wrap .list-row { float:left; width:<?php echo $item_w;?>%; }

.list-wrap .list-item { margin-right:<?php echo $gap_right;?>px; margin-bottom:<?php echo $gap_bottom;?>px; }

</style>

<div class="list-wrap">

<form name="fboardlist" id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post" role="form" class="form">

<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="sca" value="<?php echo $sca ?>">

<input type="hidden" name="sst" value="<?php echo $sst ?>">

<input type="hidden" name="sod" value="<?php echo $sod ?>">

<input type="hidden" name="page" value="<?php echo $page ?>">

<input type="hidden" name="sw" value="">

 

<div class="list-container">

<?php 

$k = 0;

for ($i=0; $i < $list_cnt; $i++) { 

 

if($list[$i]['is_notice']) continue;

 

//아이콘 체크

$is_lock = false;

$wr_icon = $wr_label = '';

if ($list[$i]['icon_secret'] || $list[$i]['is_lock']) {

$wr_icon = '<span class="wr-icon wr-secret"></span>';

$wr_label = '<div class="label-cap bg-black">Lock</div>';

$is_lock = true;

} else if ($list[$i]['icon_hot']) {

$wr_icon = '<span class="wr-icon wr-hot"></span>';

$wr_label = '<div class="label-cap bg-red">Hot</div>';

} else if ($list[$i]['icon_new']) {

$wr_icon = '<span class="wr-icon wr-new"></span>';

$wr_label = '<div class="label-cap bg-blue">New</div>';

}

 

if($wr_id && $list[$i]['wr_id'] == $wr_id) {

$wr_label = '<div class="label-cap bg-green">Now</div>';

}

 

// 썸네일

$list[$i]['no_img'] = $board_skin_url.'/img/no-img.jpg'; // No-Image

$img = apms_wr_thumbnail($bo_table, $list[$i], $thumb_w, $thumb_h, false, true);

?>

<?php if($k > 0 && $k%$board['bo_gallery_cols'] == 0) { ?>

<div class="clearfix"></div>

<?php } ?>

<div class="list-row">

<div class="list-item">

<?php if($thumb_h > 0) { ?>

<div class="imgframe">

<div class="img-wrap" style="padding-bottom:<?php echo $img_h;?>%;">

<div class="img-item">

<?php echo $wr_label;?>

<?php if ($is_checkbox) { ?>

<div class="label-tack">

<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">

</div>

<?php } ?>

<a href="<?php echo $list[$i]['href'];?>">

<img src="<?php echo $img['src'];?>" alt="<?php echo $img['alt'];?>" style="height:<?=$thumb_h?>px">

</a>

</div>

</div>

</div>

<?php } else { ?>

<div class="list-img">

<?php echo $wr_label;?>

<?php if ($is_checkbox) { ?>

<div class="label-tack">

<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">

</div>

<?php } ?>

<a href="<?php echo $list[$i]['href'];?>">

<img src="<?php echo $img['src'];?>" alt="<?php echo $img['alt'];?>">

</a>

</div>

<?php } ?>

<?php if($boset['shadow']) echo apms_shadow($boset['shadow']); //그림자 ?>

 

<strong>

<a href="<?php echo $list[$i]['href'];?>"<?php echo $ellipsis;?>>

<?php if($wr_id && $list[$i]['wr_id'] == $wr_id) {?>

<span class="crimson"><?php echo $list[$i]['subject'];?></span>

<?php } else { ?>

<?php echo $list[$i]['subject'];?></br>

<?php echo $list[$i]['name'];?>

<?php } ?>

</a>

</strong>

 

<div class="list-details font-12 text-muted">

<!--

<span class="pull-left">

<?php echo $list[$i]['name'];?>

</span>

-->

<span class="pull-right en font-13">

<i class="fa fa-comment"></i>

<?php echo ($list[$i]['wr_comment']) ? '<span class="red">'.number_format($list[$i]['wr_comment']).'</span>' : 0;?>

</span>

<div class="clearfix"></div>

</div>

</div>

</div>

<?php $k++; } ?>

<div class="clearfix"></div>

</div>

 

<?php if (!$is_list) { ?>

<div class="text-center text-muted list-none">게시물이 없습니다.</div>

<?php } ?>

 

<div class="list-btn-box">

<?php if ($list_href || $write_href) { ?>

<div class="form-group pull-right list-btn">

<div class="btn-group dropup">

<?php if ($list_href) { ?><a href="<?php echo $list_href ?>" class="btn btn-black btn-sm"><i class="fa fa-bars"></i><span>목록</span></a><?php } ?>

<?php if ($write_href) { ?><a href="<?php echo $write_href ?>" class="btn btn-color btn-sm"><i class="fa fa-pencil"></i><span>배너등록</span></a><?php } ?>

</div>

</div>

<?php } ?>

<div class="form-group list-btn font-12">

<div class="btn-group">

<a href="#" class="btn btn-black btn-sm" data-toggle="modal" data-target="#searchModal" onclick="return false;"><i class="fa fa-search"></i></a>

<?php if ($rss_href) { ?>

<a href="<?php echo $rss_href; ?>" class="btn btn-color btn-sm"><i class="fa fa-rss"></i></a>

<?php } ?>

<?php if ($is_checkbox || $setup_href || $admin_href) { ?>

<?php if ($is_checkbox) { ?>

<button type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value" class="btn btn-black btn-sm"><i class="fa fa-times"></i><span class="hidden-xs"> 선택삭제</span></button>

<button type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value" class="btn btn-black btn-sm"><i class="fa fa-clipboard"></i><span class="hidden-xs"> 선택복사</span></button>

<button type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value" class="btn btn-black btn-sm"><i class="fa fa-arrows"></i><span class="hidden-xs"> 선택이동</span></button>

<button type="button" id="btn_chkall" class="btn btn-black btn-sm"><i class="fa fa-check"></i><span class="hidden-xs"> 전체선택</span></button>

<?php } ?>

<?php if ($admin_href) { ?>

<a href="<?php echo $admin_href; ?>" class="btn btn-black btn-sm"><i class="fa fa-cog"></i></a>

<?php } ?>

<?php if ($setup_href) { ?>

<a href="<?php echo $setup_href; ?>" class="btn btn-color btn-sm win_memo"><i class="fa fa-cogs"></i><span class="hidden-xs"> 설정</span></a>

<a href="<?=G5_ADMIN_URL?>/banner_list.php?bo_table=<?=$bo_table?>" class="btn btn-color btn-sm " target="_blank"><i class="fa fa-list"></i><span class="hidden-xs"> 배너신청관리</span></a>

<?php } ?>

<?php } ?>

</div>

</div>

<div class="clearfix"></div>

</div>

</form>

 

<?php if($total_count > 0) { ?>

<div class="list-page text-center">

<ul class="pagination pagination-sm en">

<?php if($prev_part_href) { ?>

<li><a href="<?php echo $prev_part_href;?>">이전검색</a></li>

<?php } ?>

<?php echo apms_paging(G5_IS_MOBILE ? $config['cf_mobile_pages'] : $config['cf_write_pages'], $page, $total_page, './board.php?bo_table='.$bo_table.$qstr.'&page=');?>

<?php if($next_part_href) { ?>

<li><a href="<?php echo $next_part_href;?>">다음검색</a></li>

<?php } ?>

</ul>

</div>

<?php } ?>

 

<div class="clearfix"></div>

 

<?php if($is_checkbox) { ?>

<noscript>

<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>

</noscript>

<?php } ?>

</div>

</section>

<?php if ($is_checkbox) { ?>

<script>

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(){

$("#btn_chkall").click(function(){

var clicked_checked = $(this);

 

if(clicked_checked.hasClass('active')) {

all_checked(false);

clicked_checked.removeClass('active');

} else {

all_checked(true);

clicked_checked.addClass('active');

}

});

});

function fboardlist_submit(f) {

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(document.pressed + "할 게시물을 하나 이상 선택하세요.");

return false;

}

 

if(document.pressed == "선택복사") {

select_copy("copy");

return;

}

 

if(document.pressed == "선택이동") {

select_copy("move");

return;

}

 

if(document.pressed == "선택삭제") {

if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))

return false;

 

f.removeAttribute("target");

f.action = "./board_list_update.php";

}

 

return true;

}

 

// 선택한 게시물 복사 및 이동

function select_copy(sw) {

var f = document.fboardlist;

 

if (sw == "copy")

str = "복사";

else

str = "이동";

 

var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");

 

f.sw.value = sw;

f.target = "move";

f.action = "./move.php";

f.submit();

}

</script>

<?php } ?>

<!-- } 게시판 목록 끝 -->


이 질문에 댓글 쓰기 :

답변 1

현재 올리신 이미지의 사진이 가로 100% 세로 100% 아닌가요?

가로에 맞춰서 세로는 자동으로 줄여지는게 세로 100%인데 저렇게 나오는게 아니라면

어떤게 100%라는건지 잘 이해가 안되는데요  

 

모든 이미지에 상관없이 특정 높이를 정해서 사용할 수 는 있지만  

이미지가 잘리지 않게 모든 이미지를 보여주는 것은 불가능 하다고 봅니다.

이미지가 width:100 height:1000 짜리와 width 200 height:200 이 있다고 했을 때

이 두녀석의 이미지 전체가 다 보이게 하려면 width만 설정하는 방법 밖에는 없다고 봅니다.  

 

결론은 가로 얼마 세로 얼마를 정해 놓고 해당부분 밖으로 나가면 hidden을 시키는 방식으로 해야 하지 않나 싶은데요 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,998 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT