이미지를 짜르지 않고 배경화면의 커버속성을 썸네일에 적용하는 방법

썸네일 이미지 깔끔하게 구현하는 CSS

이미지 썸네일 CSS를 할 때, 크로싱 브라우저만 잘 대응할 수 있다면, 가장 좋은 CSS 설정값은 아래와 같다.

    position: absolute;
    z-index: 10;
    width: 100%;
    object-fit: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

위와 같이 설정해주는 것이 중앙정렬도 잘하고, 같은 비율(4:3) 내에서 가로와 세로의 비율을 적당하게 잘라주면서 가장 썸네일처럼 보이게 해주는 설정값이다. 배경이미지의 속성이 아니라, 이미지 내에서 위와 같이 적용하면 딱 알맞게 떨어지는데, 위에서 가장 중요한 요소는 바로 Object-fit이다. Object-fit에는 다양한 속성이 있는데, 배경이미지와 마찬가지로 Cover 속성을 적용하면 깔끔하게 썸네일로 표시된다.

하지만, 같은 비율로 이미지가 확장되어야 하므로 가로에 삐져나온 부분이나, 세로 부분을 알맞게 잘라줘야한다. 그 기준이 되는 것을 width(가로)로 적용하고, margin값을 auto로 적용해주면 깔끔하게 떨어진다.

 

예를 들어서, 1:1 비율이라면 위와 같이 표시된다.

물론, 위의 경우에는 Object 속성값을 적용한 것이 아니다. 그렇지만, 위와 같은 느낌의 썸네일 이미지를 구현한다면 Object 속성으로 매우 쉽게 구현할 수 있다. 1:1 비율의 경우에는 아래와 같이 설정해준다.

    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0;

썸네일 커버 사이즈를 1:1로 지정하고, 가로와 세로를 위와 같이 설정해주면 딱 떨어지는 썸네일을 표시할 수 있다. 이때 썸네일의 프레임이 되는 부분은 아래와 같이 설정해준다.

 

    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    height: 0;
    margin: 0 0 9px 0;
    padding-bottom: 100%;

Span 태그로 감싼 프레임에서 각 블럭은 하나의 블럭으로 인식되고, 가로 사이즈를 100%으로 둔 다음에 padding-bottom을 적용하면 위와 같이 속성을 적용시킬 수 있다. 디자인은 쉽고 깔끔할 수록 질리지 않고 오래간다. 모던한 스타일을 좋아하는 사람들에게는 위와 같은 썸네일로 구현하는 것이 가장 깔끔하다.

여기서 별도로 참고해서 알아봐야 할 것은 position의 속성값이다. absolute로 절대값을 기준으로 잡아주고, top과 left를 0으로 설정해주면 이미지가 깔끔하게 들어간다. 깔끔하게 들어간다는 뜻은 정방향 비율로 기준을 잡고 확장된다는 것이다.