CSS를 사용하여 `` 및 `` 요소로 `배경 크기: 커버` 효과를 얻는 방법은 무엇입니까?

배경 크기를 복제하는 방법:

CSS 접근 방식

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

<code class="css">.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 */
}</code>

동영상 중앙에 배치

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

<code class="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 */
}</code>

호환성 고려 사항

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

위 내용은 CSS를 사용하여 `` 및 `` 요소로 `배경 크기: 커버` 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!