Bagaimana untuk Mensimulasikan `saiz latar belakang: penutup` untuk Elemen HTML seperti Video dan Imej?

Bolehkah Anda Mensimulasikan Saiz Latar Belakang: Muka Depan pada Elemen HTML?

Saiz latar belakang: penutup ialah sifat CSS penting untuk menskalakan imej kepada muat dalam elemen bekas sambil mengekalkan nisbah bidangnya. Walau bagaimanapun, fungsi ini tidak disokong secara asli untuk elemen HTML seperti teg video dan img.

Mencapai Saiz Latar Belakang: Tutup dengan CSS

Nasib baik, terdapat CSS- satu-satunya penyelesaian yang mensimulasikan tingkah laku ini dengan berkesan, menghapuskan kebergantungan skrip. Inilah helahnya:

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

Menetapkan ketinggian video kepada 100% menjadikannya secara berkadar mengisi ketinggian elemen induknya. Lebar yang dikira memastikan nisbah bidang video dikekalkan sambil membenarkan ia meningkat untuk meliputi elemen induk penuh apabila perlu. Lebar min dan ketinggian min menghalang video daripada mengecut di bawah dimensi semula jadinya.

Memusatkan Video

Untuk memusatkan video dalam elemen induknya, tambahkan mengikuti 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>

Pendekatan ini memastikan bahawa video dipusatkan dengan sempurna dalam semua kes.

Nota: Jika video anda mempunyai nisbah aspek yang berbeza, laraskan pengiraan lebar dan ketinggian min sewajarnya untuk mengekalkan perkadaran yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan `saiz latar belakang: penutup` untuk Elemen HTML seperti Video dan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!