묻고답하기
프로필 이미지의 테두리를 이미지 사이즈에 맞게..
2010.08.04 01:41
회원정보변경란에서 등록하는 프로필 이미지의 테두리를 그 사진의 이미지에 맞게 하고 싶습니다.
위 캡쳐 이미지에 보시면 위에 자유의여신상 이미지는 100*100 으로 딱 맞아서 테두리가 어울리는데,
아래의 이미지는 75*100 정도라서 100*100을 맞춰 출력되다 보니 테두리가 옆에 생깁니다.
제가 연필로 표시한것처럼 이미지에 맞게 테두리를 넣을 수 없을까요?
알려주시면 감사하겠습니다.
댓글 3
-
향유고래
2010.08.04 03:18
-
DRUNKEN
2010.08.04 13:13
100*100 박스를 지운다는게 무슨 뜻인가요 ㅜ?
그리고 게시판은 BoradEX 기본스킨을 쓰고 있습니다..
_view.comment.html 파일을 보면
<div class="commentProfileImage">
<div class="profile">
<!--@if(($module_info->use_vote == 'S' || $module_info->use_vote == 'Z') && $comment->member_srl != $oDocument->member_srl && $oDocument->voted_list[$comment->member_srl] > 0)-->
<div class="starPointFrame small" style="margin-bottom:3px" title="{$oDocument->voted_list[$comment->member_srl]}">
<span class="starColor{$module_info->star_color} {($comment->depth)?'replyBg0':'replyBg1'}" style="width:{$oDocument->voted_list[$comment->member_srl]*8}px"></span>
<i>{$oDocument->voted_list[$comment->member_srl]}</i>
</div>
<!--@endif-->
<!--@if($oDocument->reward_point > 0 && ($module_info->use_reward == 'Y' || $module_info->use_reward == 'R'))-->
<div class="adoptComment">
<!--@if($oDocument->reward_srl == $comment->comment_srl)-->
<span>{$lang->cmd_adopted_comment}</span>
<!--@elseif($oDocument->reward_srl <= 0 && $comment->member_srl != $oDocument->member_srl && $oDocument->isGranted())-->
<a href="#" onclick="doCallModuleAction('{$module_info->module}'+ '+ ','procBoardAdoptComment','{$comment->comment_srl}'); return false;" class="button {$btn_class}"><span>{$lang->cmd_adopt_comment}</span></a>
<!--@endif-->
</div>
<!--@endif-->
<!--@if($module_info->display_sign != 'N' && $comment->member_srl && $comment->profileImage)-->
<div class="image"><img src="{$comment->profileImage}" alt="profile" /></div>
<!--@endif-->
</div>
</div>/////////////////////////////// 이렇게 되어 있구요.
view.css 파일을 보면
/* 회원 서명 및 프로필 이미지 출력 */
.memberSignature {border:1px solid; padding:10px; margin:10px; *zoom:1}
.memberSignature:after { content:""; clear:both; display:block}
.memberSignature .profile {float:left; margin-right:20px;*position:relative}
.memberSignature .profile img {border:1px solid; padding:3px; margin:none}
.memberSignature .signature {overflow:hidden}
.commentProfileImage {float:left; *position:relative}
.commentProfileImage .profile {margin:0 20px 10px 0}
.commentProfileImage .profile .star {margin-bottom:3px}
.commentProfileImage .profile .adoptComment span {font-weight:bold}
.commentProfileImage .profile .adoptComment a.button {margin:0 0 3px 0; padding:0}
.commentProfileImage .profile .image {border:1px solid; padding:0px; margin:none}//////////// 이렇게 되어 있습니다..
어떻게 수정해야 하나요??
-
향유고래
2010.08.04 16:47
보낸 쪽지 확인하고 boardEX 설치후 확인했습니다.
현 CSS 는 이미지의 크기에따라 자동적으로 테두리를 입혀줍니다.
코드에선 이상이 없어 질문자님의 홈페이지에서 "김태희" 프로필 이미지를 확인하였는데....
이미지 원본이 그렇게 생겼습니다...ㅡ.ㅜ
해당 스킨의 해당부분의 CLASS 나 ID의 CSS 를 수정해야 할것 같은데요..
현재의 100*100 박스부분을 지우고
<img src="{$member_info->profile_image->src}"> 와 비슷한 부분에 <img class="profile_img_border" src="{$member_info->profile_image->src}">
와 같은 클래스를 추가후 해당 스킨의 CSS 코드에
img.profile_img_border { border:1px solid #eee }
이렇게 하면 될듯한데요....쓰시는 스킨이 어떤것인지 몰라 확실하게 표현될지는 모르겠습니다.