첨부파일 이미지 사이즈에 따라 변수를 줄 수 있을까요?
본문
홈페이지 메인 최신글로 첨부파일의 원본을 끌어오고 있습니다.
원본 100%으로 끌어오자니 세로 사이즈가 너무 들쑥날쑥하고,
그렇다고 썸네일이나 세로에 맞추자니 늘어나거나 잘리는 현상이 있습니다.
예를 들면,
첨부파일로 첨부한 이미지의 세로 크기가 1000px 이하일 때, 최신글 이미지가 250x120
세로크기가 1000px이상일 때, 최신글 이미지가 250 x 250
이렇게 변수가 가능한지 여쭤보려고 합니다.
답변 3
원하시는 답은 아니지만, css 로 해결 할 수 있습니다.
저도 저런 경우가 있어서 어떻게 해야할까 생각하다가,
이럴땐 사진을 좀 크게 키운다음, 가운데에 위치하게 하는 방법으로 해결을 봤습니다.
사진원본에 따라 가로가 조금 빌때도 있지만 ㅠㅠ 그래도 해볼만한 방법이랍니다 ㅎㅎ
<div class="thum_box">
<div class="thum_img">
<img src=""> <!-- 이미지출력 -->
</div>
</div>
<style>
.thum_box {width:120px; height:130px; border:1px solid #ededed; position:absolute; top:0; left:0; overflow:hidden;}
.thum_img {position:relative; width:100%; height:100%; z-index:1;}
.thum_img img {position:absolute; top:50%; left:50%; width:100%; height:auto; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);
}
</style>
위처럼 구성하시면, 일단 모두를 만족하는 결과를 얻으실 수 있습니다.
.thum_img img 에서 width:100% 를 125% 까지 더 키워서 맞출수도 있으며,
width:auto; height:125% 이런식으로 height 값으로 기준을 줄 수도 있습니다.
css 는 사이트에 맞게 변경하시면 됩니다.
g5_board_file 테이블에서 bf_height값을 이용해 분기해보세요
그렇다고 썸네일이나 세로에 맞추자니 늘어나거나 잘리는 현상이 있습니다<---썸네일 만드는 방법 중에
이미지 전체를 비율로 만들지않고 사이즈에 맞게 잘라서 만들면 됩니다
예를들어 가로 250으로 만들면 세로가 120이 되어버린다면
이런 이미지는 세로를 250으로 만들고 250보다 큰 가로를 센터를 잡아서 250 크기로 자르는 거죠
