jQuery fakecrop 이미지 비율맞추어 보여주기

jquery.fakecrop.js

모바일 프로모션중에 사용자가 사진을 올려 응모한 후,
리스트에 보여줘야 할 때가 종종 있다.

고정된 div에 그냥 img태그로 뿌려준다면 비율에 상관없이 꽉채워서 나오기때문에,
fakecrop이라는 jquery플러그인을 사용하였다.

참조URL : http://vuongnguyen.com/fake-cropping-images-with-jquery.html

위 주소에도 나와있지만,사용법은 간단한 편이다.
플러그인을 다운받고 소스상단에 include시켜준 후,
img를 지정하여 fakecrop(); 해주면된다. 나는 고정된 크기에 이미지를 맞춰야하므로 fill:false를 적용하였다.

    $(document).ready(function () {
        // for a filled square thumbnail
        $('img').fakecrop();
        // for a fixed width/height
        $('img').fakecrop({fill: false});
    });

기본적으로 그냥 fakecrop만하면 가로,세로 100인 이미지 기준으로 적용된다.
그래서 fill:false부분 다음에 width와 height값을 넘겨줘야했다.

모바일의경우에는 가로사이즈에따라 이미지 크기가 가변적이므로
투명레이어를 미리 소스에넣고 width와 height를 구하여 넣어주었다.

var $img_width = $투명레이어.width();
var $img_height = $투명레이어.height();
$('img').fakecrop({fill: false, wrapperWidth: $img_width , wrapperHeight: $img_height });

※ 적용 전 과 후