브라우저 가로폭에 따라서 세로 박스 비율 유지하는 2가지 방법

뭘 좋아할지 몰라서 모두 준비해 봤어

2022.05.05수정

featured image thumbnail for post 브라우저 가로폭에 따라서 세로 박스 비율 유지하는 2가지 방법

이번 포스팅에서는 브라우저 가로폭에 따라서 자식 요소의 박스 비율 유지해서 개발하는 기법에 대해 설명합니다.

이 기법은 대개 유튜브 영상을 반응형으로 넣는다거나, 썸네일 비율을 일정하게 맞춰서 반응형 처리하게 한다던가 할 때 주로 씁니다.

비율은 1920 by 1080 기준으로 설명합니다. (16/9 비율)

relative + padding-top

.external
  position: relative
  padding-top: 56.25%
  height: 0
  
  .internal
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

import styles from '@/styles/example.module.sass';

function Example() {
  return (
    <div className={styles.external}>
      <div className={styles.internal}>헬로 월드</div>
    </div>
  )
}

export default Example;

56.25%는 새로 / 가로 100을 한 값입니다. 즉 위 경우에는 1080 / 1920 100 입니다.

aspect-ratio

.external
  aspect-ratio: 16 / 9
  
  .internal
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

import styles from '@/styles/example.module.sass';

function Example() {
  return (
    <div className={styles.external}>
      <div className={styles.internal}>헬로 월드</div>
    </div>
  )
}

export default Example;

16 / 9, 1920 / 1080 둘 다 됩니다.

주의사항

relative + padding-top 방식에서 반드시 감싸는 영역의 height는 0을 지정해 줘야 합니다.
aspect-ratio 방식은 부모가 flexbox인 경우에는 쓸 수 없습니다. 이 경우에는 relative + padding-top 방식을 사용하세요.

FIN!