가로세로 비율을 유지하는 반응형 박스

dev | 2012-08-22

반응형 웹디자인에서는 max-width: 100%width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다.

가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.

#movie-player-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.26%;
}
#movie-player-wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖에 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.

50px
100px
200px

가변 크기의 동영상 플레이어를 넣어야 하는 경우가 있었는데 요긴하게 사용했다.

Comments

  • 태희 2012-09-12

    이런방법이있군요 필요한 형태였는데 고심하다가 안되는건가했었는데 감사합니다.

  • j1 2012-11-04

    정말 유용한 정보네요. !! 감사합니다. ^^

  • 박민철 2014-03-25

    설마했는데 이런 방법이 있네요 정말 감사합니다.

  • mui 2014-05-15

    정말 유용한 아이디어 군요. 다만 화면 사이즈에 따라서 padding-bottom: 56.26%; 이 수치가 달라 지더군요. 이 부분을 보완할 수 있으면 최고일듯 합니다.

  • 신현석 2014-05-15

    #movie-player-wrapper의 너비가 100%이니 의도된 동작입니다. 너비를 고정하거나 너비가 고정된 상위요소가 있으면 되요.

  • john 2014-07-08

    안녕하세요~ 유튜브 에서 어떻게 사용하면 되는것인가요? 답변 부탁드립니다 ^^

  • 신현석 2014-07-09

    뭘 물어보시는 건지 모르겠네요.

  • 행복사랑 2014-08-09

    안녕하세요, 사진일 경우에는 어떻게 적용하면 될까요? https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRSx-XRrNVB-45B7WVu_24iOjuhVwDVuGRrAiLeYW1UHyTKwrh80w 링크로 예를 들어주실수 있으신가요?

  • 신현석 2014-08-09

    이미지는 그냥 width: 100% 지정하고 높이를 지정하지 않으면 브라우저가 알아서 가로세로 비율을 유지한 상태로 이미지를 그려줍니다.

  • 이대근 2014-09-13

    유용한 정보 감사드립니다. 그런데 혹시 아이프레임으로 노출시키는 유투브에도 적용가능할까요?? 가령 pc에서도 비율이 맞고 모바일에서도 비율맞게요.

  • 신현석 2014-09-14

    적용해 보지는 않았지만 유투브 동영상에도 충분히 적용 가능할 것으로 생각됩니다.

  • 마징가 2014-10-15

    필요한 정보였는데 감사합니다. 그런데 해당 내용을 적용했더니 데스크탑이나 아이패드에서는 보이는데 스마트폰에서는 보이지가 않네요. 왜그럴까요...??

  • 신현석 2014-10-16

    브라우저나 동영상 플레이어와 관련이 있을 수 있을 것 같아요.

  • Toby 2015-01-21

    이 방법을 사용하는 경우 하위 요소에서 height:100%; 박스를 만들기 어려운 문제가 있는데요. position: absolute; 와 함께 top: 0; bottom: 0; left: 0; right: 0; 이렇게 4방향을 모두 0 값을 주면 영역에 꽉 차는 박스를 만들 수 있습니다. 서로 반대되는 방향의 값을 동시에 주는 경우 가상의 영역(virtual dimension)을 만들도록 되어있기 때문이지요. (좀 더 많은 분들과 나누고 싶은 생각에 이 곳에 댓글로 남깁니다)

  • 신현석 2015-01-22

    코드에 높이 100%인 하위 요소를 추가해 봤습니다. 하위 요소의 높이가 100%가 되지 않는 경우가 재현되는 URL 알 수 있을까요?

  • Toby 2015-12-10

    위의 댓글을 제가 1월에 남겼었군요 ㅋ 어떤 케이스였는지 잘 기억이 안납니다. 근데 요즘은 저도 4방향 0값 주는 것 보다 보통은 width, height 100%주는 방법을 쓰고 있네요. 무시해주셔도 될 것 같습니다 ^^;

  • 또동 2016-03-06

    그동안 height값 때문에 디바이스 크기가 작아지면 여백이 너무 생기는 게 고민이었는데 덕분에 해결되었습니다 ^^

  • 유현아 2016-10-17

    height:0 을 주면이미지는 삽입 못 하는 건가요?

  • 신현석 2016-10-21

    유현아, #movie-player-wrapper .wrap안에 넣으면 됩니다.

  • moon 2016-12-22

    좋은 정보 감사합니다. 적용도 잘했습니다. 그런데 이해는 잘 되지 않네요 ㅜㅜ #movie-player-wrapper에서 속성중 padding-bottom: 56.26%; 패딩값은 어떻게 나온 값인가요? 아무리 생각해도 풀리지가 않네요

  • 신현석 2016-12-23

    56.26%는 16:9 화면비율의 세로비율입니다. 다른값으로 변경해도 무방합니다.

  • happySO 2017-08-14

    정말 감사합니다!

  • 2018-02-20

    도움 많이 됐습니다. 16:9 비율을 맞추고 높이는 창의 절반정도만 채우고 싶었는데 width :88.88vh height : 50vh 이렇게하니 잘되더군요 (88.88 = 16/9 * 50)

  • 상동 2018-10-18

    ㄳㄳ 감사합니다.

  • 최명규 2018-11-13

    코딩을 잘 몰라서 하나 여쭤볼게요~ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ouO1Q5_aO5s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> 유튜브에 업로드 한 동영상의 소스코드 인데요. 제품의 상세페이지에 그냥 복사해서 넣으면 유동적으로 영상 비율이 조정되지는 않더라구요 위에서 말씀하신 코드를 제가 위에쓴 소스코드에 어떻게 적용하면 좋을지 ㅠㅠ 영상은 1280 x 720의 비율이구요

  • 신현석 2018-11-14

    <div style="position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/ouO1Q5_aO5s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div> 이렇게 하면 될 것 같은데요. 실제로 적용이 잘 될지는 복사해 넣는 에디터에 따라서 달라질 수 있을 것 같아요.

  • 김혜원 2019-05-24

    안녕하세요. 유용한 정보 정말 감사드립니다. 다름이 아니고 제가 적용해봤더니 ie에서는 동영상이 안나와서요 ㅠ_ㅠ ie edge랑 ie11확인해봤습니다. 어떻게 해야할까요..도움 부탁드립니다.ㅠㅠ

  • 김혜원 2019-05-24

    하핫 위의 질문은 해결되었습니다.:) 1920이상의 비디오는 출력이 안되는건지 몬지..비디오 사이즈를 줄여봤더니 잘 나오네요;;; 감사합니다.ㅠㅠ 아..하나더 질문해도 될까요? 하단 패딩값 계산하는 공식이 있을까요? 자꾸 질문-_- 죄송합니다;;;

  • 신현석 2019-05-25

    패딩값은 화면 비율이 16:9 비율일 경우 9 ÷ 16 = 0.5625이기 때문에 56.25%로 하면 됩니다. 처음에 왜 56.26%로 했는지 모르겠네요.

  • 김혜원 2019-05-27

    감사합니다!!!

  • yun 2019-07-02

    감사합니다! 고민하던 문제였는데 해결했어요 ^^/

  • 솜이리키 2019-11-20

    정말감사합니다:) 너무너무 유용한 정보예요^^ 덕분에 잘 해결했습니다:) 감사해요~

  • sdf 2019-11-22

    그런데 만약 모바일로 출력한다던가 창의 크기를 최소로 줄이면 패딩 퍼센트를 준 만큼 공간이 밑에 남게 됩니다 이 때 어떻게 해야할까요?

  • dodanpapa 2021-06-10

    3시간넘게 삽질했는데 덕분에 해결의 실마리를 찾네요. 감사합니다.

  • 2021-10-27

    비율에 잘 맞게 움직이는데 PC 화면에서는 너무 커져서 문제가 되는 상황인데요. 비율 유지하면서 반응형으로 작동하되 일정 크기 이상으로 커지지 않도록 가로폭 제한을 걸 수 있을까요?

  • 신현석 2021-10-28

    max-width: 600px 이런식으로 최대폭 지정하면 될 것 같아요.

  • 초급독학 2021-11-24

    해결방법 계속 찾다가 겨우 찾았네요. 그랜절 박겠습니다 제 수명을 늘려준 만큼 만수무강하십시오

  • 사랑합니다 2022-09-05

    압도적 감사

  • Brian 2022-11-16

    좋은 글 감사합니다! 제 경우에는 max-width를 고려해야했는데 그럴경우는 max-width와 min 을 이용하면 가능해지더라구요. 이를 공유합니다. ``` #movie-player-wrapper { position: relative; width: 100%; height: 0; overflow: hidden; - padding-bottom: 40%; + max-width: 1200px; + padding-bottom: min(40%, 480px); } #movie-player-wrapper .wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ```

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.