이미지 가로폭 고정 (세로는 원본비율대로) 출력되게 하는 방법

이미지 가로폭 고정 (세로는 원본비율대로) 출력되게 하는 방법

QA

이미지 가로폭 고정 (세로는 원본비율대로) 출력되게 하는 방법

본문

게시판 리스트 페이지에서 첨부파일에 있는 이미지 (로고파일)를 출력하는 부분에

아래 소스를 사용중입니다.

 

                        <?php
                        if ($list[$i]['is_notice']) { // 공지사항  ?>
                            <span class="is_notice">공지</span>
                        <?php } else {
                            $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

                            if($thumb['src']) {
                                $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';
                            } else {
                                $img_content = '<span class="no_image">no image</span>';
                            }

                            echo $img_content;
                        }
                         ?>

 

위의 소스로는 게시판 설정에 있는 이미지 사이즈로 적용이 되는데요.

로고파일이 가로세로 비율이 각기 달라서, 가로폭만 지정하고, 세로는 가로사이즈에 맞게

로고 이미지 비율대로 출력되게 하고 싶습니다.

 

예를들어 출력되는 로고이미지의 가로사이즈를 100px로 고정하고,

200*50 => 100*25로 출력 , 200*200 => 100*100 으로 출력

이렇게 가로는 지정된 사이즈로 조정되고 세로는 원본비율대로 출력되게 하려면

 

위의 소스를 어떻게 수정하면 될까요?

 

이 질문에 댓글 쓰기 :

답변 2


<?php
if ($list[$i]['is_notice']) { // 공지사항  ?>
    <span class="is_notice">공지</span>
<?php } else {
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], null, false, true);
 
    if($thumb['src']) {
        $img_info = getimagesize($thumb['src']);
        $img_width = 100;
        $img_height = $img_width * $img_info[1] / $img_info[0];
 
        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$img_width.'" height="'.$img_height.'">';
    } else {
        $img_content = '<span class="no_image">no image</span>';
    }
 
    echo $img_content;
}
?>
 

 

로고 이미지의 가로 사이즈를 고정하고 세로는 원본 비율에 맞게 조정하려면, 이미지 태그에 width 속성을 사용하고 height 속성을 생략하면 됩니다. 이렇게 하면 브라우저가 원본 비율을 유지하면서 이미지를 출력하게 됩니다.


<?php
if ($list[$i]['is_notice']) { // 공지사항  
    echo '<span class="is_notice">공지</span>';
} else {
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
    if ($thumb['src']) {
        // 가로 사이즈를 100px로 고정하고, 세로는 비율에 맞게 조정
        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" style="width: 100px; height: auto;">';
    } else {
        $img_content = '<span class="no_image">no image</span>';
    }
    echo $img_content;
}
?>


 
  • <img> 태그에 style="width: 100px; height: auto;"를 추가했습니다.
  • width 속성은 100px로 고정하고, height 속성은 auto로 설정하여 원본 비율을 유지합니다.
답변을 작성하시기 전에 로그인 해주세요.
전체 471
QA 내용 검색

회원로그인

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