썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율

✈ 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jQuery 가로세로 비율

웹사이트나 애플리케이션을 제작하면서 이미지의 비율이나 크기를 맞추는 것은 중요한 작업 중 하나입니다. 특히, 썸네일이나 대표 이미지와 같은 고정된 영역에 다양한 크기와 비율의 이미지를 표시해야 할 때, 그 이미지를 영역에 꽉 차게 보여주면서도 넘치는 부분을 잘라내야 할 필요가 있습니다.

이미지의 가로와 세로 비율을 고정된 영역에 맞추려면, 서버에서 이미지를 잘라내거나 리사이징하는 방법이 있습니다. 하지만 이 방법은 원본 이미지의 품질을 손상시킬 수 있기 때문에, CSS나 jQuery를 활용하여 원본 이미지를 그대로 유지하면서도 원하는 비율에 맞게 보여주는 방법을 찾아야 합니다.

CSS를 활용한 해결 방법

먼저, 이미지를 감싸는 외부 컨테이너를 만들고, 이 컨테이너의 비율을 정해줍니다. 예를 들어 16:9 비율로 이미지를 보여주고 싶다면, 컨테이너의 padding-top 값을 56.25%로 설정합니다. 그 다음, 이미지를 가운데 정렬하기 위해 position: absolute와 transform 속성을 사용합니다. 마지막으로, 이미지의 가로나 세로 중 짧은 변의 길이를 100%로 설정하여 이미지가 컨테이너에 꽉 차게 보이도록 합니다.

jQuery를 활용한 해결 방법

이미지의 가로와 세로 중 어느 쪽이 더 긴지를 판단하기 위해서는 JavaScript나 jQuery의 도움이 필요합니다. 이미지의 가로와 세로 비율을 비교하여, 가로가 더 긴 이미지에는 landscape 클래스를, 세로가 더 긴 이미지에는 portrait 클래스를 추가합니다. 이렇게 하면, CSS에서 해당 클래스에 따라 이미지의 크기를 조절할 수 있습니다.

썸네일이나 대표 이미지의 비율을 유지하면서도 원본 이미지의 품질을 그대로 유지하는 것은 웹 개발에서 중요한 작업 중 하나입니다. 위에서 설명한 CSS와 jQuery를 활용한 방법을 통해 이 작업을 간단하게 해결할 수 있습니다.

css

.featImgWrap {
  width: 380px;
}

.featImgWrap {
  position: relative;
  padding-top: 56.57%;
  /* 16:9 ratio */
  overflow: hidden;
}


.featImgWrap .featImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.featImgWrap .featImage img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.featImgWrap .featImage img.landscape {
  max-height: 100%;
  height: 100%;
  max-width: none;
}

.featImgWrap .featImage img.portrait {
  max-width: 100%;
  width: 100%;
  max-height: none;
}

jquery 

$(document).ready(function () {

    // feat image ratio size
    $('.featImage > img').each(function (index, item) {
        if ($(this).height() / $(this).width() < 0.567) {
            $(this).addClass('landscape').removeClass('portrait');
        } else {
            $(this).addClass('portrait').removeClass('landscape');
        }
    });
    $('#programModalSummary').on('shown.bs.modal', function (e) {
        $('#programModalSummary .featImage > img').each(function (index, item) {
            if ($(this).height() / $(this).width() < 0.567) {
                $(this).addClass('landscape').removeClass('portrait');
            } else {
                $(this).addClass('portrait').removeClass('landscape');
            }
        });
    })

});