[Javascript/jQuery] Image Load 후 Resize Event 사용

✏️ Info.

- Image 를 Container 에 맞게 가로 세로를 Resize 하는 작업 진행 중 사용

---

📋 List.

1. img onload 시 Resize

---

✔️ Content.

 

1. img onload 시 Resize

 

 

1). onload

• Image에 사용할 함수
• Image가 로딩 된 이후 Reszie Event를 실행하기 위해 사용

2). Resize Event

 

• Image의 Width, Height를 가져온다.
• Width, Height 에 따라 CSS 설정 값 적용
  • todo - Image 컨테이너 에 사이즈 비율을 체크하여 CSS 설정하는 로직 필요
  • 현재는 정사각형 컨테이너를 기준으로 구성되었다.

/* Image Load이후 Event 적용*/
function imgResizeEvnet(e){
    //Image Width 가져오기
    var imgWidth = $(e).prop('naturalWidth');
    
    //Image Height 가져오기
    var imgHeight = $(e).prop('naturalHeight');
    
    // 높이가 더 클 때
    if (imgWidth < imgHeight) {
    
        // 너비 auto, 높이 100%, max-height 100%
        $(e).css({
            width: 'auto',
            height: '100%',
            maxWidth: 'none'
        })
        
    // 너비가 더 클 때
    } else {   
    
        // 높이 auto, 너비 100%, max-width 100%
        $(e).css({
            height: 'auto',
            width: '100%',
            maxWidth: '100%'
        })
    }
}

• 소스 사용 예

<img src="${src}" onload="javascript:imgResizeEvnet(this);" >