반응형 작업중입니다. 이미지가 서로 다른경우 latest출력시 동일한사이즈로
본문
이미지 사이즈가 서로 다릅니다.
이런경우 latest출력시 아래처럼 중간에 여백도 있고 간격고 이상하고 이런데
동일한 사이즈로 반응형으로 작업하려면 어떻게 수정해야 할까요?
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 800;
$thumb_height = 500;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="margin-top-50 margin-bottom-50" id="003">
<div class="po_box">
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['ori']) {
$img = $thumb['ori'];
} else {
$list[$i]['wr_content'];
preg_match("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $list[$i]['wr_content'], $match);
$img = $match[1];
}
//$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" class="img-responsive" >';
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" class="img-responsive" style="width:100%">';
?>
<div class="port_list">
<div>
<a href="<?php echo $list[$i]['href'] ?>">
<div class="item-img-wrap">
<a href="<?php echo $list[$i]['href'] ?>"><?php echo $img_content;?></a>
<a href="<?php echo $list[$i]['href'] ?>">
<div class="item-img-overlay">
<span>
<ul class="txt_box">
<li class="title kos4"><?php echo $list[$i]['subject'] ?></li>
<li class="article kos3"><?php echo cut_str(strip_tags($list[$i]['wr_content']),'60','...') ?></li>
</ul>
</span>
</div>
</a>
</div>
</a><!--news link-->
</div>
</div>
<?php } ?>
<?php if ($list_count == 0) { //게시물이 없을 때 ?>
<li class="empty_li">게시물이 없습니다.</li>
<?php } ?>
</div>
</div>
답변 3
제가 아는 한에서는
1. 이미지를 동일한 사이즈를 사용하도록 정책적으로 확립
2. 그냥 이미지를 background-size:cover로
여기 참조하시면 빠르게 이해 되실거 같네요.
background-size:cover는 박스안에 맞게는 할수 있지만 이미지가 늘어나는것은 감수해야 합니다. 이미지를 맞게 해서 올리심이 제일 나은것 같습니다
백그라운드 사이즈 커버에서 이미지가 비율과 다르게 늘어나 찐따가 되는 브라우저는 제가 알기로는 익스 뿐입니다.
이제 생명이 다한 익스는 삼국시대로 보내야 할 시기가 아닐까요?
답변을 작성하시기 전에 로그인 해주세요.
