배경 크기를 복제하는 방법: 및 요소에 표지

와 같은 HTML 요소로 작업할 때 또는 의 경우 background-size:cover의 기능을 시뮬레이션하는 데 어려움을 겪는 것이 일반적입니다. 이 CSS 속성은 배경 이미지가 전체 요소를 덮고 가로세로 비율을 유지하도록 보장합니다.

CSS 접근 방식

CSS만 사용하면 완벽한 표지 시뮬레이션을 만들 수 있습니다. 스크립트에 의존하지 않고 비디오를 위한 것입니다. 비결은 상위 요소의 종횡비를 기준으로 비디오의 너비와 높이를 정확하게 계산하는 데 있습니다. 예를 들어 동영상의 가로세로 비율이 16:9인 경우:

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

동영상 중앙에 배치

동영상도 중앙에 배치해야 하는 경우 다음 CSS가 안정적인 접근 방식을 제공합니다.

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

호환성 고려 사항

이 솔루션은 CSS3 호환 브라우저에서 완벽하게 작동하지만, 이전 브라우저에서는 원하는 결과를 얻으려면 스크립트 기반 접근 방식이 필요할 수 있습니다.