view_image.php 소스에 대한 질문
본문
bbs 폴더에 view_image.php 파일 47번 줄에요.
$img = '<img src="'.$fileurl.'" alt="" '.$img_attr.' class="draggable" style="position:relative;top:0;left:0;cursor:move;">';
이렇게 되어있는데 말이죠. 이미지가 화면보다 클때 찌그러져 나오네요.
즉, 가로는 화면 크기에 맞춰서 나오고 세로는 원본 이미지 크기로 나와 버리네요.
$img = '<img src="'.$fileurl.'" alt="" class="draggable" style="position:relative;top:0;left:0;cursor:move;max-width: 100%; height: auto;">';
이렇게 수정하면 이미지 비율에 맞게 화면에 가득차게 나오는데...원본이미지 크기로 볼 수 없다는 단점이 있네요.
예전에는 화면을 벗어난 큰 이미지가 보였던걸로 기억하는데...
왜 가로는 화면에 가득찬 크기로 나오고 세로는 원본크기로 나올까요?
답변 2
사용자 경험과 관련된 사소한 문제로 보이는군요.
이미지는 기본적으로 브라우저의 렌더링 방식에 따라 표시되며,
현재 설정도 충분히 적절하게 작동되고 있을 것입니다.
다만, 사용자 입장에서 원본 크기를 확인하거나 화면 크기에 딱 맞춰 보기를 원할 때
약간의 불편함이 있을 수는 있습니다. 이를 개선하기 위해 간단한 CSS 수정이나
JavaScript를 추가하면 충분히 해결 가능한 수준이며,
운영이나 서비스에 큰 영향을 주지는 않을 것입니다.
정리하자면 제 생각엔,
'구동에는 큰 문제가 없다'입니다.
개선은 선택 사항이며,
사용자 편의성을 위해 적용할 수도 있지만,
지금 상태에서도 기능적으로 문제가 없으니,
굳이 신경 쓰지 않으셔도 될 것으로 사료됩니다.
ㅡ ㅡ ㅡ
다음과 같은 방안을 고려할 수는 있습니다 :
1. 이미지를 클릭하면 원본 크기로 표시되도록 간단한 JavaScript를 추가.
$img = '<img src="'.$fileurl.'" alt="" class="draggable" style="position:relative;top:0;left:0;cursor:move;max-width: 100%; height: auto;" onclick="this.style.maxWidth=\'none\';">';
2. 큰 이미지를 스크롤로 볼 수 있도록 overflow 속성을 활용.
$img = '<div style="overflow: scroll; max-width: 100%;"><img src="'.$fileurl.'" alt="" class="draggable"></div>';
이러한 개선은 선택 사항이며,
현재 상태에서도 기능적으로 문제가 없으니 반드시 적용하지 않아도 무방합니다.
운영이나 서비스에 영향을 주는 큰 문제는 아니므로, 필요에 따라 적용해보시는 것이 좋겠습니다.
그누 원본 소스를 안건드리려고 하다보니 고민거리가 생겨 글을 남겼습니다.
홈페이지가 여러개다 보니 한번씩 업데이트 하는게 힘들어서요.
다음 패치 버전에는 이미지가 찌그러지지 않게 개선되어 나왔으면 하는 바램에서 문의하게 되었습니다. 답변 감사합니다.
~/_
원본소스 그대로면 $img_attr에 원본소스의 width와 hegiht가 들어갑니다. 그래서 드래그 기능으로 이미지 move가 가능하구요. 어딘가 css에서 width만 100%로 잡혀버려서 그런게 아닐까요? 원본 소스로 실행한 뒤 크롬 개발자도구로 확인해보세요.
그래서 화면크기 보다 큰 이미지가 찌그러져 보이네요.
원래 기능이 원본 이미지를 보기 위한 거니까 스크롤바가 생겨서라도 원본을 볼 수 있게 하는게 취지에 맞지 않을까 생각합니다. 가끔 한번씩 패치할때 전체를 덮어쓰는 방식으로 하다보니 원본 소스를 수정할 수가 없어요.^^
