- 질문 게시판입니다.
Date | 18/02/22 13:05:12 |
Name | nickyoPD |
Subject | 자바스크립트 관련 질문입니다 ㅠㅠ |
코딩 목적: 배열로 들어있는 정보를 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번째까지 해결하려면 자바스크립트에서 받은 클래스 정보를 배열에 넣고 해야하는데 ㅠㅠ 아무리 이리저리해봐도 해결이 안됩니다.. 도와주세요.. 0
이 게시판에 등록된 nickyoPD님의 최근 게시물
|