Bagaimana untuk Mencapai Gelagat \"saiz latar belakang: penutup\" pada Video dan Elemen Imej Hanya Menggunakan CSS?

Mencapai Gelagat "saiz latar: penutup" pada Elemen Video dan Imej

Sambil anda berusaha untuk mensimulasikan fungsi "saiz latar belakang : penutup" pada elemen seperti

Masalah dengan Penyelesaian Terdahulu

Penyelesaian Timothy, walaupun berkesan dalam beberapa senario, gagal untuk mengendalikan penskalaan dengan betul, mengakibatkan kesan zum yang tidak diingini apabila elemen induk video lebih kecil daripada fail video.

Penyelesaian Yang Diperbaiki

Jika nisbah bidang video diketahui , seperti 16:9, kod CSS ini akan mencapai kesan yang diingini:

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

Kod ini menetapkan ketinggian kepada 100% bekas dan lebar kepada nilai yang dikira berdasarkan nisbah bidang. Lebar dan ketinggian minimum memastikan pengecilan berlaku jika bekas lebih kecil daripada fail video.

Memusatkan Video

Untuk memusatkan, gunakan CSS berikut:

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

Ini meletakkan video secara mutlak dan menggunakan terjemah untuk memusatkannya dalam elemen induknya.

Pertimbangan Keserasian

Perhatikan bahawa VW, VH dan transform ialah ciri CSS3. Untuk keserasian dengan penyemak imbas lama, anda mungkin perlu menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Gelagat \"saiz latar belakang: penutup\" pada Video dan Elemen Imej Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!