jQuery Resizable을 통한 이미지 크기 조절 (이미지 사이즈 조절)

이번 프로젝트에서 javascript 에디터 내부에 사진을 넣고 사이즈 조절이 가능하게 만들어야 했다.

 

사용하는 Trumbowyg editor는 기본적으로 사진 첨부 기능을 제공하지만 우리가 원하는 방향이 아니었다.

 

그래서 이미지 사이즈 조절을 위해 여러 방법을 만들어 두고 최종적으로 사용하게 된 방법은

 

Resizable을 사용하여 div 사이즈를 조절하고 div 내부에 사진을 100%로 채워 넣었다.

 

이미지를 한번 클릭하면 이미지를 마우스 클릭으로 사이즈 조절(크기 조절)이 가능하게 된다.

(이미지를 드레그 하여 사이즈 조절)

 

.js

/**
 * [이미지 클릭 이벤트]
 *  - 복사/붙여넣기한 이미지를 클릭하는 경우 사이즈 조절이 가능하게 함
 *  - jQuery ui 필요함
 */
$(document).on('click', 'img', function(event){
    // prepend
    if($(this).parent().attr('id') != 'resizable'){
        $(this).parent().append(`
            <div id="resizable" class="ui-widget-content" readonly>
            </div>
        `);
        $(this).parent().children('#resizable').append(this);
        $(this).parent().resizable();
    }
});

.css (상황에 맞게 css를 수정하여 사용하자)

#resizable {
    /* width: 600px;
    height: 600px; */
    padding: 0.5em;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#resizable img {
    width: 100%;
    height: 100%;
}

 

---

https://jqueryui.com/resizable/

Resizable | jQuery UI

https://jqueryui.com/download/

Download Builder | jQuery UI