[web] thumbnail의 width 값 비율에 따라 height 크기 조절하기

정공법은 아니지만, 많은 개발자들이 사용하는 방법을 소개하고자 한다.

반응형이 100% 지원되진 않지만 레이아웃이 변경이 되면 일부 컨텐츠들은 반응형처럼 작동되는게 보기 좋다.

 

핵심은 코드는 아래와 같다

눈여겨 볼 속성은 height와 padding-bottom 이다.

height를 0으로 설정함으로써 기본 보여주는 속성을 완전히 지우고,

padding-bottom 속성을 주면서 width 기준으로 간접적으로 height를 1.6배 증가하라고 설정한다.

padding을 %로 설정하면 width값에 비례한다고 한다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Percentages: refer to the width of the containing block

.item {
  width: 100%;
  height: 0;
  padding-bottom: 160%;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

 

Demo

 

See the Pen set height of thumb depending on dynamic width by Daewoong Kim (@daewoong-kim) on CodePen.