테스트 사이트 - 개발 중인 베타 버전입니다

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

연탄집개 3년 전 조회 1,392

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

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

 

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

 

 

 

 

</p>

<p><?php

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

include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>

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

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

$thumb_width = 800;

$thumb_height = 500;</p>

<p>$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);</p>

<p>        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></p>

<p>                    </div>                       

                </a><!--news link--> 

            </div> 

        </div>

        <?php }  ?>

        <?php if ($list_count == 0) { //게시물이 없을 때  ?>

        <li class="empty_li">게시물이 없습니다.</li>

        <?php }  ?>

    </div>

</div></p>

<p>

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

답변 3개

채택된 답변
+20 포인트

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

 

https://sir.kr/pb_tip/3552

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

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

육기경훈

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

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

답변에 대한 댓글 1개

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

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

제가 아는 한에서는

 

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

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

 

https://nykim.work/86

 

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

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

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

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

로그인