이미지 가로폭 고정 (세로는 원본비율대로) 출력되게 하는 방법 채택완료
게시판 리스트 페이지에서 첨부파일에 있는 이미지 (로고파일)를 출력하는 부분에
아래 소스를 사용중입니다.
<?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개
</p>
<p><?php</p>
<p>if ($list[$i]['is_notice']) { // 공지사항 ?></p>
<p> <span class="is_notice">공지</span></p>
<p><?php } else {</p>
<p> $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], null, false, true);</p>
<p> </p>
<p> if($thumb['src']) {</p>
<p> $img_info = getimagesize($thumb['src']);</p>
<p> $img_width = 100;</p>
<p> $img_height = $img_width * $img_info[1] / $img_info[0];</p>
<p> </p>
<p> $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$img_width.'" height="'.$img_height.'">';</p>
<p> } else {</p>
<p> $img_content = '<span class="no_image">no image</span>';</p>
<p> }</p>
<p> </p>
<p> echo $img_content;</p>
<p>}</p>
<p>?></p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
로고 이미지의 가로 사이즈를 고정하고 세로는 원본 비율에 맞게 조정하려면, 이미지 태그에 width 속성을 사용하고 height 속성을 생략하면 됩니다. 이렇게 하면 브라우저가 원본 비율을 유지하면서 이미지를 출력하게 됩니다.
</p>
<p><?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);</p>
<p> 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>';
}</p>
<p> echo $img_content;
}
?><img>태그에style="width: 100px; height: auto;"를 추가했습니다.width속성은 100px로 고정하고,height속성은auto로 설정하여 원본 비율을 유지합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인