원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기

이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다.
저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다.

구현결과

구현하고자 하는 모양새는 아래와 같습니다.
이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다.
이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다.

HTML 구현

<div class="js-imgSizeSame">
    <img src="img.jpg">
</div>

핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다.

javascript 구현

javascript는 jquery를 활용하였습니다.
이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다.

이미지 찾기

$('.js-imgSizeSame').each(function(index) { // 1번 

  $(this).children('img').one("load", function() { // 2번 
  }).each(function() {
    imageSizeSame($(this).parent(), 0.7); // 3번 
  });

  $(this).parents('.card').find('.desc-noimg').addClass('desc').removeClass('desc-noimg'); // 4번 

});

1. jquery의 each를 활용하여 웹페이지에서 .js-imgSizeSame 클래스가 적용된 모든 이미지를 찾습니다.
2. .js-imgSizeSame 클래스 안에 있는 image가 Load가 완료되면~
3. imageSizeSame($(this).parent(), 0.7); Function을 실행합니다.
4. 이미지가 없는 경우 전체 크기에서 해설의 글을 더 많이 나타내기 위해서 CLASS를 표시합니다.(옵션요소입니다.)

이미지 크기 구하여 조절하기

function imageSizeSame(wrapImgClass, ratio=0) { // 1번
  var divHeight;
  var div = wrapImgClass;
  var img = div.children('img');
  var divWidth = div.width();
  if(!ratio || ratio == 0) {                    // 2번
    divHeight = div.height();                   // 3번
  } else {
    divHeight = divWidth * ratio;               // 4번
    div.height(divHeight + 'px');               // 5번
  }
  var divAspect = divHeight / divWidth;         // 6번
  var imgAspect = img.height() / img.width();   // 7번

  if (imgAspect <= divAspect) {                 // 8번
    // 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 중앙으로 맞춤
    var imgWidthActual = div.outerHeight(true) / imgAspect; 
    var imgWidthToBe   = div.outerHeight(true) / divAspect;  
    var marginLeft     = -Math.round((imgWidthActual - imgWidthToBe) / 2);  
    img.css({  
      width: 'auto',
      'margin-left': marginLeft + 'px',
      height: '100%'
    });
  } else {  // 9번
    // div가 이미지보다 납작한 경우 가로를 img에 맞추고 세로는 중앙으로 맞춤
    var imgHeightActual = div.outerWidth(true) * imgAspect;   
    var imgHeightToBe   = div.outerWidth(true) * divAspect;  
    var marginTop       = Math.round((imgHeightActual - imgHeightToBe) / 2); 
    img.css({  
      width: '100%',
      'margin-left': 0,
      'margin-top': - marginTop + 'px',
      height: 'auto'
    });
  }
}

1. wrapImgClass은 이미지를 감싸고 있는 .js-imgSizeSame DIV를 말합니다. ratio는 가로/세로 비율 입니다.
2. 입력요소에 ratio 값이 없거나 0인경우
3. 실제 DIV의 height의 값을 구해서 divHeight에 입력합니다.
4. 입력요소에 ratio 값이 있는 경우 width에 ratio을 곱해서 divHeight 값을 구합니다.
5. 해당 div DOM에 style로 height값을 적용합니다.
6. DIV의 가로, 세로 비율을 구합니다.
7. Image의 가로, 세로 비율을 구합니다.
8. Image가 div보다 납작한 경우 Image의 Height를 div에 대해 100%로 맞추고 가로는 중앙으로 맞춤
9. div가 Image보다 납작한 경우 Image의 Width를 div에 대해 100%로 맞추고 세로는 중앙으로 맞춤

CSS 구현

CSS는 특별히 상관이 없습니다. 모두 javascript에서 구현을 해 줍니다.