반응형 작업중입니다. 이미지가 서로 다른경우 latest출력시 동일한사이즈로 채택완료

이미지 사이즈가 서로 다릅니다.

이런경우 latest출력시 아래처럼 중간에 여백도 있고 간격고 이상하고 이런데 

동일한 사이즈로 반응형으로 작업하려면 어떻게 수정해야 할까요? 

1030059593_1656638151.3984.png

Copy
<?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개

채택된 답변
+20 포인트

이미지나 백그라운드를 보기싫지 않게 리사이징하는 css 를 사용하심이...

https://sir.kr/pb_tip/3552

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

background-size:cover는 박스안에 맞게는 할수 있지만 이미지가 늘어나는것은 감수해야 합니다. 이미지를 맞게 해서 올리심이 제일 나은것 같습니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

백그라운드 사이즈 커버에서 이미지가 비율과 다르게 늘어나 찐따가 되는 브라우저는 제가 알기로는 익스 뿐입니다.
이제 생명이 다한 익스는 삼국시대로 보내야 할 시기가 아닐까요?

댓글을 작성하려면 로그인이 필요합니다.

제가 아는 한에서는

1. 이미지를 동일한 사이즈를 사용하도록 정책적으로 확립

2. 그냥 이미지를 background-size:cover로

https://nykim.work/86

여기 참조하시면 빠르게 이해 되실거 같네요. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고