Bagaimana untuk Mencapai Kesan \'Saiz Latar Belakang: Penutup\' yang Konsisten untuk dan dengan CSS Tulen?

dan dengan CSS Tulen? " /> dan dengan CSS Tulen? " />

Simulasi Latar Belakang Muka Depan untuk

Mencapai kesan "saiz latar belakang: penutup" yang konsisten untuk elemen seperti < video> dan telah menjadi cabaran lama.

Penyelesaian CSS tanpa Kes Tepi:

Daripada bergantung pada skrip, penyelesaian CSS tanpa kes tepi boleh dilaksanakan menggunakan langkah berikut:

1. Tetapkan elemen induk supaya mempunyai limpahan: tersembunyi.
2. Tetapkan elemen video atau imej kepada ketinggian: 100%;.
3. Kira lebar berdasarkan nisbah bidang (cth., 100 * 16 / 9 untuk video 16:9).
4. Tetapkan lebar min: 100% untuk mengelakkan saiz semula lebih kecil daripada induk.
5. Tetapkan ketinggian min untuk memastikan ketinggian menurun secara berkadar.

Contoh:

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

Video Berpusat:

Untuk memusatkan video, gunakan CSS berikut:

<code class="css">.parent-element-to-video {
    position: relative;
}

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

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan \'Saiz Latar Belakang: Penutup\' yang Konsisten untuk