CSS를 사용하여 HTML 요소에서 `배경 크기: 커버` 기능을 달성하는 방법은 무엇입니까?

CSS를 사용하여 HTML 요소에서 배경 크기: 표지 기능을 구현하는 방법

HTML 요소에서 배경 크기:표지 기능 시뮬레이션 비디오나 이미지 같은 것은 까다로운 작업이 될 수 있습니다. 그러나 CSS 속성의 조합을 사용하면 스크립팅 없이 원하는 동작을 모방하는 솔루션을 만드는 것이 가능합니다.

CSS 솔루션

배경 달성의 열쇠 -size:cover는 비디오 요소의 높이, 너비 및 최소 크기를 적절하게 설정하는 것입니다. 비디오의 가로 세로 비율(예: 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를 사용하여 HTML 요소에서 `배경 크기: 커버` 기능을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!