본문으로 바로가기

이미지(썸네일)의 크기를 조정하거나 노출하고 싶은 부분만을 잘라내어(Crop) 출력하는 방법들에 대한 이야기입니다. 서버단에서 넘겨받은 이미지를 재가공할때 생각해볼 만한 기법들을 소개합니다.

이미지 크기조정에 대한 고려사항

많은 경우, 서버단에서 출력할 이미지를 여러 라이브러리등을 통해 일정한 크기로 재조정(resizing)해서 넘겨주고 이를 그대로 출력해왔다. 최근에 이르러서는 유동적인 웹 디자인으로 인해 다양한 이미지 크기에 대한 대응을 요구하기에 관련하여 새로운 스펙( picture )이 생겨나고 있으며, 이 밖에도 반응형 이미지 및 여러가지 트릭을 이용해 대응하고 있는 실정이다.

  • 이미지의 크기를 원래의 비율을 무시한 채로 임의로 조정한다면 일그러진 화상을 얻을수 있지만 원하는 크기로 출력은 가능하다.
  • 크기가 고정된 영역안에서 이미지를 비율에 맞게 조정 할 수 있지만 작게 축소된 부분이 의도했던 결과와는 다를 수 있으며, 고정된 영역과 이미지의 크기에 따라 여백이 생겨 고정된 영역을 꽉채우지(fit, full) 못하기도 한다.
  • 이미지의 위치조정을 통해 원하는 노출부위만을 출력할 수도 있지만 좌,우,위,아래가 잘린 화상을 얻게 되어 전체적인 윤곽을 가늠할 수 없을지도 모른다.
  • 접근방식을 달리하여 고정된 영역에 썸네일을 꽉 채우기 위해서 background-size:cover 와 같은 배경 속성을 이용할 수도 있다.
  • 목적에 따라 어느정도 타협이 필요한 부분이며, 개인의 선택이 작용한다. 무엇보다 고정된 영역안에서 보여지는 썸네일이라면 고려해야할 사항들이 많아진다.

    object-fit 속성 활용

    CSS3에서 추가된 속성인 object-fit 을 사용하여 고정된 영역에 원하는 방식으로 썸네일을 채워 넣을 수 있다.

    img {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }
    

    다만, IE에서는 아직 지원하지 않는 관계로 크로스브라우징에 문제가 발생함을 유념해야 한다. 자세한 내용은 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 을 참고하자.

    반응형 이미지 활용

    익히 알다시피, 반응형 이미지는 자신의 최대 너비값 보다 작은 컨테이너 안에서는 자동으로 현재 너비의 비율에 맞춰 높이가 지정되며 이에따라 썸네일을 자동으로 축소시킬 수 있다. 반응형 이미지를 감싸는 컨테이너 요소에 너비를 설정함으로써 고정된 너비의 반응형 이미지를 얻게 된다.

    .responsive {
        width: 100px;
    }
    .responsive img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    

    컨테이너 요소에 높이를 설정하고 넘치는 부분을 잘라내면 너비와 높이 모두 고정된 크기의 썸네일을 얻을 수 있지만 화상이 잘리거나 화면을 채우지 못한 여백이 생기게 된다.

    .responsive-fixed {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    .responsive-fixed img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    

    이를 가운데 정렬하는 여러가지 방법을 검색으로 찾을 수 있는데 그 중에 하나는 아래와 같다.

    .responsive-center {
        position: relative;
        width: 100px;
        height: 100px;
    }
    .responsive-center img {
        position: absolute;
        max-height: 90%;
        max-width: 90%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    

    실제 작동은 예제페이지에서 확인할 수 있다.

    썸네일의 일정부분을 잘라 보여주는 방법

    사각형 컨테이너 내에서 중앙정렬과 불규칙한 썸네일 크기를 잘라내는 용도로 사용된다.

    Center and crop thumbnails with CSS - JONATHAN NICOL

    이 기법은 CSS3 transform을 사용하고 있으며, 그렇기에 IE9 이상의 모던 브라우저에서 작동한다.

    .thumb-crop {
        position: relative;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    .thumb-crop img {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100%;
        width: auto;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    
    .thumb-crop .portrait {
        width: 100%;
        height: auto;
    }
    
    .thumb-crop .auto {
        height: auto;
    }
    

    기본적인 스타일은

    • 썸네일 이미지의 높이를 컨테이너의 높이에 맞춤으로써 너비는 컨테이너를 넘치게 된다. 이는 종횡비를 유지하기 위한 방법이고 이 넘치는 부분들을 가운데 정렬하여 컨테이너의 가운데에 썸네일을 위치하게 한다.
    • 다만 이 경우 높이가 너비보다 긴 portrait[각주:1] 형태의 썸네일은 여백을 생성하게 되니 따로 클래스를 추가해서 반대로 너비를 컨테이너에 맞추고 높이를 넘치게 하고 이를 가운데 정렬하는 방법을 사용한다.
    • 만약 너비와 높이를 모두 auto 값으로 설정한다면 컨테이너의 크기에 맞게 줄어든 썸네일이 아닌 원본 썸네일 크기에서 가운데 정렬을 적용하게 된다.

    자동화하기 위해서는 스크립트를 이용해 컨테이너의 너비보다 작은 썸네일의 너비일 경우 .portrait 를 추가하면 되겠다.

    구형 IE를 위해 크로스브라우징을 생각한다면,

    • 반응형 이미지 활용에서 사용한 responsive fixed img center 에서 사용한 방법을 섞어 쓰던가
    • 스크립트를 이용해 컨테이너의 크기에 맞게 줄어든 썸네일의 너비를 구한 후 이의 절반만큼 margin-lef 값을 음수 값으로 설정하면 되겠다. 이는 일반적인 absoulute 포지셔닝의 가운데 정렬 방법이다.
    • portrait 형태는 반대로 높이 값을 구한후 이의 절반만큼 margin-top 의 값을 음수 값으로 설정하면 된다.
    • 그런데 이렇게 크로스브라우징을 염두할 것이라면 처음부터 그냥 스크립트를 짜는 것이 나을지도...

    실제 작동은 예제페이지 에서 확인할 수 있다.

    기타 참고가 될만한 링크, 플러그인


    1. portrait는 초상화를 뜻하는데 세로가 긴 초상화의 형태를 따와 디바이스의 세로모드로 불리곤 한다. 반대로 landscape 는 풍경화로 가로모드를 가리키곤 한다. [본문으로]

    댓글을 달아 주세요

    티스토리 툴바