자바스크립트 관련 질문입니다 ㅠㅠ

코딩 목적: 배열로 들어있는 정보를 C:forEach 를 통해 div 안에 뿌리는데 img 크기가 div보다 클 경우 자동으로 조정해주는 자바스크립트 window.onload를 처리,
클래스 네임 :  .logo => <img src 태그 클래스 네임>, .img <div 태그 클레스 네임>

<----자바스크립트 부분------->

<script>
window.onload = function() {
var divs = document.querySelectorAll('.logo > .img');
for(var i=0; i<=4; i++){
var div = divs[i];
var divAspect = div.offsetHeight / div.offsetWidth;
div.style.overflow = 'hidden';

var img = div.querySelector('.logo');
var imgAspect = img.height / img.width;

if (imgAspect <= divAspect) {
// 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다
var imgWidthActual = div.offsetHeight / imgAspect;
var imgWidthToBe = div.offsetHeight / divAspect;
var marginLeft = -Math
.round((imgWidthActual - imgWidthToBe) / 2)
img.style.cssText = 'width: auto; max-height: 100%; margin-left: '
+ marginLeft + 'px;'
} else {
// 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다
img.style.cssText = 'max-width: 100%; height: auto; margin-left: 0;';
}
}
};
</script>

<------데이터 표시 부분 -------->

<c:forEach items="${JobPost_Main }" var="JobList">
<div class="four wide column" style="border: 1px solid black; text-color: black;">
<div class="ui centered fluid card">
<div class="img">
      <a href="${conPath }/JobPostContentView.do?postNo=${JobList.postNo}">
                                     <img src="${conPath }/CompanyLogoImage/${JobList.postCompanyLogo}" class="logo" /></a>
        </div>
</div>
</div>
</c:forEach>


입니다. 자바스크립트에서 for문이랑 divs 선언을 빼고 document.queryselector 로 클래스 네임을 받아서 돌리면 첫번째 이미지까지는 해결이 되는데 배열로 정보를 받아오는거라 4번째까지 해결하려면 자바스크립트에서 받은 클래스 정보를 배열에 넣고 해야하는데 ㅠㅠ 아무리 이리저리해봐도 해결이 안됩니다.. 도와주세요..