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

August 22, 2012 08:30 PM

반응형 웹디자인에서는 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 21:09

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

  • j1 2012-11-04 21:11

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

  • 박민철 2014-03-25 15:03

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

  • mui 2014-05-15 09:05

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

  • 신현석 2014-05-15 10:05

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

  • john 2014-07-08 20:07

    안녕하세요~

    유튜브 에서 어떻게 사용하면 되는것인가요?

    답변 부탁드립니다 ^^

  • 신현석 2014-07-09 10:07

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

  • 행복사랑 2014-08-09 15:08

    안녕하세요, 사진일 경우에는 어떻게 적용하면 될까요?

    https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRSx-XRrNVB-45B7WVu_24iOjuhVwDVuGRrAiLeYW1UHyTKwrh80w 링크로 예를 들어주실수 있으신가요?

  • 신현석 2014-08-09 21:08

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

  • 이대근 2014-09-13 02:09

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

  • 신현석 2014-09-14 01:09

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

  • 마징가 2014-10-15 19:10

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

  • 신현석 2014-10-16 18:10

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

  • Toby 2015-01-21 17:01

    이 방법을 사용하는 경우 하위 요소에서 height:100%; 박스를 만들기 어려운 문제가 있는데요.

    position: absolute; 와 함께
    top: 0; bottom: 0; left: 0; right: 0; 이렇게 4방향을 모두 0 값을 주면 영역에 꽉 차는 박스를 만들 수 있습니다.

    서로 반대되는 방향의 값을 동시에 주는 경우 가상의 영역(virtual dimension)을 만들도록 되어있기 때문이지요.

    (좀 더 많은 분들과 나누고 싶은 생각에 이 곳에 댓글로 남깁니다)

  • 신현석 2015-01-22 00:01

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

  • Toby 2015-12-10 23:12

    위의 댓글을 제가 1월에 남겼었군요 ㅋ

    어떤 케이스였는지 잘 기억이 안납니다.
    근데 요즘은 저도 4방향 0값 주는 것 보다 보통은 width, height 100%주는 방법을 쓰고 있네요.

    무시해주셔도 될 것 같습니다 ^^;

  • 또동 2016-03-06 21:03

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

  • 유현아 2016-10-17 10:10

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

  • 신현석 2016-10-21 14:10

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

  • moon 2016-12-22 14:12

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

  • 신현석 2016-12-23 00:12

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

  • happySO 2017-08-14 11:08

    정말 감사합니다!

  • 2018-02-20 02:02

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

  • 상동 2018-10-18 14:10

    ㄳㄳ
    감사합니다.

  • 최명규 2018-11-13 17:11

    코딩을 잘 몰라서 하나 여쭤볼게요~
    <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 11:11

    <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 10:05

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

  • 김혜원 2019-05-24 15:05

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

  • 신현석 2019-05-25 07:05

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

  • 김혜원 2019-05-27 14:05

    감사합니다!!!

  • yun 2019-07-02 11:07

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

Post a comment

:

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

:

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