가로세로 비율을 유지하는 반응형 박스
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
가변 크기의 동영상 플레이어를 넣어야 하는 경우가 있었는데 요긴하게 사용했다.
Share on
Comments
이런방법이있군요 필요한 형태였는데 고심하다가 안되는건가했었는데 감사합니다.
정말 유용한 정보네요. !! 감사합니다. ^^
설마했는데 이런 방법이 있네요 정말 감사합니다.
정말 유용한 아이디어 군요. 다만 화면 사이즈에 따라서 padding-bottom: 56.26%; 이 수치가 달라 지더군요. 이 부분을 보완할 수 있으면 최고일듯 합니다.
#movie-player-wrapper의 너비가 100%이니 의도된 동작입니다. 너비를 고정하거나 너비가 고정된 상위요소가 있으면 되요.
안녕하세요~ 유튜브 에서 어떻게 사용하면 되는것인가요? 답변 부탁드립니다 ^^
뭘 물어보시는 건지 모르겠네요.
안녕하세요, 사진일 경우에는 어떻게 적용하면 될까요? https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRSx-XRrNVB-45B7WVu_24iOjuhVwDVuGRrAiLeYW1UHyTKwrh80w 링크로 예를 들어주실수 있으신가요?
이미지는 그냥 width: 100% 지정하고 높이를 지정하지 않으면 브라우저가 알아서 가로세로 비율을 유지한 상태로 이미지를 그려줍니다.
유용한 정보 감사드립니다. 그런데 혹시 아이프레임으로 노출시키는 유투브에도 적용가능할까요?? 가령 pc에서도 비율이 맞고 모바일에서도 비율맞게요.
적용해 보지는 않았지만 유투브 동영상에도 충분히 적용 가능할 것으로 생각됩니다.
필요한 정보였는데 감사합니다. 그런데 해당 내용을 적용했더니 데스크탑이나 아이패드에서는 보이는데 스마트폰에서는 보이지가 않네요. 왜그럴까요...??
브라우저나 동영상 플레이어와 관련이 있을 수 있을 것 같아요.
이 방법을 사용하는 경우 하위 요소에서 height:100%; 박스를 만들기 어려운 문제가 있는데요. position: absolute; 와 함께 top: 0; bottom: 0; left: 0; right: 0; 이렇게 4방향을 모두 0 값을 주면 영역에 꽉 차는 박스를 만들 수 있습니다. 서로 반대되는 방향의 값을 동시에 주는 경우 가상의 영역(virtual dimension)을 만들도록 되어있기 때문이지요. (좀 더 많은 분들과 나누고 싶은 생각에 이 곳에 댓글로 남깁니다)
코드에 높이 100%인 하위 요소를 추가해 봤습니다. 하위 요소의 높이가 100%가 되지 않는 경우가 재현되는 URL 알 수 있을까요?
위의 댓글을 제가 1월에 남겼었군요 ㅋ 어떤 케이스였는지 잘 기억이 안납니다. 근데 요즘은 저도 4방향 0값 주는 것 보다 보통은 width, height 100%주는 방법을 쓰고 있네요. 무시해주셔도 될 것 같습니다 ^^;
그동안 height값 때문에 디바이스 크기가 작아지면 여백이 너무 생기는 게 고민이었는데 덕분에 해결되었습니다 ^^
height:0 을 주면이미지는 삽입 못 하는 건가요?
유현아, #movie-player-wrapper .wrap안에 넣으면 됩니다.
좋은 정보 감사합니다. 적용도 잘했습니다. 그런데 이해는 잘 되지 않네요 ㅜㅜ #movie-player-wrapper에서 속성중 padding-bottom: 56.26%; 패딩값은 어떻게 나온 값인가요? 아무리 생각해도 풀리지가 않네요
56.26%는 16:9 화면비율의 세로비율입니다. 다른값으로 변경해도 무방합니다.
정말 감사합니다!
도움 많이 됐습니다. 16:9 비율을 맞추고 높이는 창의 절반정도만 채우고 싶었는데 width :88.88vh height : 50vh 이렇게하니 잘되더군요 (88.88 = 16/9 * 50)
ㄳㄳ 감사합니다.
코딩을 잘 몰라서 하나 여쭤볼게요~ <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의 비율이구요
<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> 이렇게 하면 될 것 같은데요. 실제로 적용이 잘 될지는 복사해 넣는 에디터에 따라서 달라질 수 있을 것 같아요.
안녕하세요. 유용한 정보 정말 감사드립니다. 다름이 아니고 제가 적용해봤더니 ie에서는 동영상이 안나와서요 ㅠ_ㅠ ie edge랑 ie11확인해봤습니다. 어떻게 해야할까요..도움 부탁드립니다.ㅠㅠ
하핫 위의 질문은 해결되었습니다.:) 1920이상의 비디오는 출력이 안되는건지 몬지..비디오 사이즈를 줄여봤더니 잘 나오네요;;; 감사합니다.ㅠㅠ 아..하나더 질문해도 될까요? 하단 패딩값 계산하는 공식이 있을까요? 자꾸 질문-_- 죄송합니다;;;
패딩값은 화면 비율이 16:9 비율일 경우 9 ÷ 16 = 0.5625이기 때문에 56.25%로 하면 됩니다. 처음에 왜 56.26%로 했는지 모르겠네요.
감사합니다!!!
감사합니다! 고민하던 문제였는데 해결했어요 ^^/
정말감사합니다:) 너무너무 유용한 정보예요^^ 덕분에 잘 해결했습니다:) 감사해요~
그런데 만약 모바일로 출력한다던가 창의 크기를 최소로 줄이면 패딩 퍼센트를 준 만큼 공간이 밑에 남게 됩니다 이 때 어떻게 해야할까요?
3시간넘게 삽질했는데 덕분에 해결의 실마리를 찾네요. 감사합니다.
비율에 잘 맞게 움직이는데 PC 화면에서는 너무 커져서 문제가 되는 상황인데요. 비율 유지하면서 반응형으로 작동하되 일정 크기 이상으로 커지지 않도록 가로폭 제한을 걸 수 있을까요?
max-width: 600px 이런식으로 최대폭 지정하면 될 것 같아요.
해결방법 계속 찾다가 겨우 찾았네요. 그랜절 박겠습니다 제 수명을 늘려준 만큼 만수무강하십시오
압도적 감사
좋은 글 감사합니다! 제 경우에는 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%; } ```