WEB개발이야기/웹퍼블리싱 2018. 8. 12.
원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기
이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다. 저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다. 구현결과 구현하고자 하는 모양새는 아래와 같습니다. 이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다. 이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다. HTML 구현 핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다. javascript 구현 javascript는 jquery를 활용하였습니다. 이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다..