화면상에서 썸네일 리스트를 제공할 때에 손쉽게 썸네일 비율을 유지하는 방법이다.

애초부터 썸네일 이미지들이 모두 같은 비율로 crop이 되어 있다면 이것은 필요없는 팁이다. 하지만 서비스 초기단계에서 생각했던 화면 디자인은 시간이 지나면 바뀔 수 있는데, 그렇게 되면 새로운 화면 디자인에 맞추어서 모든 썸네일들을 재생성하게 될 수도 있다. 따라서 화면디자인과 썸네일의 크기 혹은 비율과는 독립적인 관계로 유지하도록 설계하는 것이 좋을 것이다.

타일에서는 간단하게 특정한 비율의 Transparent PNG와 CSS background를 이용한다. 이렇게 했을 때의 장점으로는 반응형에서 화면 사이즈에 따라 썸네일 크기가 달라지더라도 썸네일의 의도된 비율을 계속 유지하는 것이다. 물론 자바스크립트나 DOM과 CSS조합을 이용할 수도 있지만, 이 방법이 가장 간단할 것이다.

이 원리를 한 줄 코드로 표현하면 아래와 같다. 이미지 자체는 비율을 유지하는 일종의 컨테이너 역할을 시키고, 실제 이미지는 그 안에 CSS background를 이용하는 방법이다.

<img src="transparent-16by9.png" style="width:100%;background:url('thumbnail.jpg') no-repeat center center;background-size:cover;" />
  1. http://png-pixel.com/ 사이트등을 이용하여 원하는 비율의 투명 PNG를 만든다. 이미지가 무언가 추가로 생기는게 싫다면 같은 화면에 있는 Base64코드를 이용해도 무관하다.
  2. 썸네일을 배치할 영역에 투명 PNG를 나타나내는 img 태그를 삽입한다.
  3. CSS로 해당 img 태그에 background-image 속성을 추가해준다. crop방식도 background-size: contain or cover 속성으로 변경할 수 있다.
  4. 화면 디자인이 변경되어 썸네일 비율을 수정해야한다면, 다시 1.에서 원하는 비율의 투명 PNG를 생성하면 된다.

예제 : https://codepen.io/zidell/pen/qPzGop