비디오 및 이미지와 같은 HTML 요소에 대해 `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?

HTML 요소에서 Background-Size: Cover를 시뮬레이션할 수 있습니까?

Background-size: Cover는 이미지 크기를 조정하는 데 필수적인 CSS 속성입니다. 종횡비를 유지하면서 컨테이너 요소 내에 맞춥니다. 그러나 이 기능은 video 및 img 태그와 같은 HTML 요소에 대해 기본적으로 지원되지 않습니다.

Achieving Background-Size: Cover with CSS

다행히도 CSS-가 있습니다. 이 동작을 효과적으로 시뮬레이션하여 스크립트 종속성을 제거하는 유일한 솔루션입니다. 비결은 다음과 같습니다.

<code class="css">.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */
}</code>

동영상 높이를 100%로 설정하면 상위 요소의 높이가 비례적으로 채워집니다. 계산된 너비는 비디오의 종횡비를 유지하는 동시에 필요한 경우 전체 상위 요소를 덮을 수 있도록 확장할 수 있도록 해줍니다. 최소 너비와 최소 높이는 동영상이 원래 크기 아래로 축소되는 것을 방지합니다.

동영상 중앙에 배치

상위 요소 내에서 동영상을 중앙에 배치하려면 다음 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>

이 접근 방식을 사용하면 모든 경우에 동영상이 완벽하게 중앙에 배치됩니다.

참고: 동영상의 가로 세로 비율이 다른 경우 원하는 비율을 유지하기 위해 너비와 최소 높이를 계산합니다.

위 내용은 비디오 및 이미지와 같은 HTML 요소에 대해 `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!