갤러리 게시판 썸네일 꽉차게 하는 방법
관련링크
본문
현재 게시판 상황입니다. 첫번째 이미지 가로가 100% 나오고 세로가 가로에 맞춰서 나옵니다. 설정은 관리자에서 아래와 같이 했습니다. 이미지폭은 정해주고, 갤러리 이미지 높이를 "0"으로 했더니 가로에 맞춰서 세로가 정렬이 되는데~
하고 싶은것은 현재 상황에서 가로도 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을 시키는 방식으로 해야 하지 않나 싶은데요