background-image 비율 유지하며 반응형 만드는법

[padding과 calc()를 이용해 background-image를 반응형으로 만드는 방법]

 

background-image는 img 태그가 아니어도 영역 안에 이미지를 넣을 수 있는 속성

 

 

 

반응형 레이아웃을 짤 때 보통 width 값을 기준으로 잡기 때문에,

이미지가 들어간 태그의 부모요소에 width 값은 (2그리드 : 50%, 3그리드 : 33.33% 4그리드 : 25% 등등..) 퍼센트를 이용하여 너비를 정해주고 , 자신의 width값은 100%를 줍니다.

 

문제는 height값인데, 여기서 img태그의 경우에는 높이값을 auto로 해두면, 문제 없이 작동합니다.

 

[ img태그를 이용한 반응형 코드 ]

See the Pen bg-img1 by sott120 (@sott120) on CodePen.

 

 

 

 

 

 

 

하지만 background-image속성은 이미지 자체의 너비가 아니라 요소의 영역 안을 채우는 형태입니다.

따라서 height : auto도 먹지 않고, 부모요소에 높이가 정해져있지 않다면 %를 사용할 수도 없습니다.

 

이러한 문제는 padding-top이나 padding-bottom을 이용하여 해결할 수 있습니다. 

특히 이미지의 종횡비를 유지한채로 반응형을 만들 때 사용합니다.

 

세로px / 가로px * 100

위 공식을 이용하면 높이값 없이도 이미지의 비율대로 종횡비가 유지됩니다.

 

padding-top: calc(height  /width *100%);

 

여기에 calc 함수를 이용하면 직접 계산하지 않고 패딩값을 줄 수 있습니다.

위 속성들을 이용하여 background-image로 반응형을 만들어보았습니다.

 

[ background-image 속성을 이용한 반응형 코드 ]

See the Pen Untitled by sott120 (@sott120) on CodePen.

 

 

 

 

 

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

위 속성을 이용하여 원하는 위치와 사이즈에 맞게 조절하면 완성입니다.

 

 

 

 

 

 

이미지링크 출처 : unsplash