search

helloMihyun / study

0 stars 0 forks source link

영상비율(16:9) 유지하기 #31

Open helloMihyun opened 4 years ago

helloMihyun commented 4 years ago

동영상 및 사진 등 미디어 콘텐츠를 보여줄 경우 모바일 웹페이지인 경우 16:9 등의 비율로 고정할 경우

https://webisfree.com/2020-03-11/[css]-16-9-%EB%93%B1%EC%9D%98-%EB%B9%84%EC%9C%A8-ratio-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B3%BC-%ED%8C%81

`#container { display: block; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh;

background: black; margin: 0 auto; border: 20px solid #fff; }`

여기서 width와 height 값만으로 16:9 설정이 가능합니다. 하지만 아래에 max-height와 max-width 값을 적용해야 width보다 height가 큰 경우에 screen을 벗어나지 않도록 최대 크기를 지정하게 됩니다.

이제 위 css를 적용한 화면을 실제로 구현해도록 하겠습니다. 이해를 돕기 위해서 아래의 버튼을 클릭하면 팝업이16:9 비율로 나타납니다. 직접 클릭 후 알아보세요.

helloMihyun commented 4 years ago

(https://webisfree.com/2019-03-11/css-%EB%B0%B1%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B0%8F-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8-%EB%B9%84%EC%9C%A8%EB%A1%9C-%EC%A1%B0%EC%A0%88%ED%95%98%EA%B8%B0-aspect-ratio)

.container-padding {
  width: 200px;
}
.inner {
  background-color: orange;
  padding-top: 50%;
}
helloMihyun commented 3 years ago

http://jsfiddle.net/ZcMkt/ 유튜브 숨겼다가 보여지게 https://lottogame.tistory.com/6333 https://codepen.io/chris_development/pen/XWmrVNV