CSS만 사용하여 비디오 및 이미지 요소에서 \"배경 크기: 커버\" 동작을 달성하는 방법은 무엇입니까?

비디오 및 이미지 요소에서 "배경 크기: 커버" 동작 달성

"배경 크기"의 기능을 시뮬레이션하려고 할 때 : 표지'를

이전 솔루션의 문제점

Timothy의 솔루션은 일부 시나리오에서는 효과적이지만 일부 시나리오에서는 실패합니다. 크기 조정을 올바르게 처리하기 위해 비디오의 상위 요소가 비디오 파일보다 작은 경우 원치 않는 확대/축소 효과가 발생합니다.

향상된 솔루션

비디오의 화면 비율이 알려진 경우 , 예를 들어 16:9와 같은 경우 이 CSS 코드는 원하는 효과를 달성합니다.

<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>

이 코드는 높이를 컨테이너의 100%로 설정하고 너비를 가로 세로 비율에 따라 계산된 값으로 설정합니다. 최소 너비와 높이는 컨테이너가 비디오 파일보다 작은 경우 축소가 발생하도록 보장합니다.

비디오 중앙 정렬

중앙 정렬에는 다음 CSS를 사용합니다.

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

동영상을 절대적으로 배치하고 번역을 사용하여 상위 요소 내 중앙에 배치합니다.

호환성 고려 사항

VW, VH 및 변환은 CSS3 기능입니다. 이전 브라우저와의 호환성을 위해 JavaScript를 사용해야 할 수도 있습니다.

위 내용은 CSS만 사용하여 비디오 및 이미지 요소에서 \"배경 크기: 커버\" 동작을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!