Pure CSS를 사용하여 및 에 대해 일관된 \'배경 크기: 표지\' 효과를 얻는 방법은 무엇입니까?

및 를 Pure CSS로 사용하시겠습니까? " /> 및 를 Pure CSS로 사용하시겠습니까? " />

<video> 및 <img>에 대한 표지 배경 시뮬레이션

< video<img>는 오랜 도전이었습니다.

Edge Cases가 없는 CSS 솔루션:

스크립트에 의존하는 대신 극단적인 경우는 다음 단계를 사용하여 구현할 수 있습니다.

1. 상위 요소에 오버플로가 숨겨지도록 설정합니다.
2. 비디오 또는 이미지 요소를 높이: 100%;로 설정합니다.
3. 가로세로 비율을 기준으로 너비를 계산합니다(예: 16:9 동영상의 경우 100 * 16 / 9).
4. 상위 동영상보다 크기가 작아지는 것을 방지하려면 최소 너비를 100%로 설정하세요.
5. 높이가 비례적으로 축소되도록 최소 높이를 설정합니다.

예:

<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">.parent-element-to-video {
    position: relative;
}

video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}</code>

위 내용은 Pure CSS를 사용하여