브랜드 이벤트 구현 당시
S3에서 불러온 배경이미지 사이즈를 계산하는 방식에대해서

ncnc-event 신년 이벤트 진행 시 아래와 같은 방법을 사용함 (성현님)

const BackImage = styled.div`
  position: relative;
  width: 100vw;
  ${({backgroudImage}) =>
    `background: url(${backgroudImage.url}) no-repeat;
    height:${(backgroudImage.height / backgroudImage.width) * 100}vw`};

  background-size: contain;
  overflow: hidden;
`

vw, vh 란?

• vw: viewport width
• vh : viewport height

100vw, 100vh 가 전체 화면의 기준

Ex) 현재 스크린 크기가
height = 1000px, width = 800px 이라면
1vh = 10px  /  1vw = 8px

% 와의 차이

• %를 쓰고 있는 요소의 부모 요소가 기준이 됨
• width: 100vh 사용가능 즉, 단위를 자유롭게 적용시킬 수 있음

width: 100vw

현재 실행중인 스크린의 가로길이를 다 채움

height: (실제 이미지의 높이 / 가로 * 100)vw

실제 너비 : 실제 높이 = 100vw : x
x = ( 실제 높이 * 100vw ) / 실제 너비

vw기준 실제 이미지의 너비/높이의 비율을 유지한다

---

background-size: contain

• contain
  이미지의 너비를 축소/확대하여 요소의 크기에 맞춤
  즉 너비를 확대해서 이미지를 맞추기에 높이가 상대적으로 적은 이미지는 반복

• cover
  너비/높이 모두 축소/확대하여 요소의 크기에 맞춤

---

Reference

• https://programming119.tistory.com/93 [개발자 아저씨들 힘을모아:티스토리]

• https://devjhs.tistory.com/611 [background-size: contain]