Bagaimana untuk Mencapai Kesan \'Saiz Latar Belakang: Penutup\' yang Konsisten untuk

Susan Sarandon
Lepaskan: 2024-10-30 16:02:03
asal
646 orang telah melayarinya

How to Achieve a Consistent dan Bagaimana untuk Mencapai Kesan \'Saiz Latar Belakang: Penutup\' yang Konsisten untuk <video> dan <img> dengan CSS Tulen? dengan CSS Tulen? " /> dan Bagaimana untuk Mencapai Kesan \'Saiz Latar Belakang: Penutup\' yang Konsisten untuk <video> dan <img> dengan CSS Tulen? 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!