Cara Meniru saiz latar belakang:kulit pada
Apabila bekerja dengan elemen HTML seperti
Pendekatan CSS
Dengan menggunakan CSS sahaja, anda boleh mencipta simulasi penutup yang sempurna untuk video tanpa bergantung pada skrip. Caranya terletak pada pengiraan lebar dan ketinggian video secara tepat berbanding nisbah bidang elemen induk. Contohnya, jika video anda mempunyai nisbah bidang 16:9:
<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>
Memusatkan Video
Jika anda juga perlu memusatkan video, CSS berikut akan memberikan pendekatan yang boleh dipercayai:
<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>
Pertimbangan Keserasian
Walaupun penyelesaian ini berfungsi dengan sempurna dalam penyemak imbas yang mematuhi CSS3, penyemak imbas lama mungkin memerlukan pendekatan berasaskan skrip untuk mencapai hasil yang diingini.
Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan `background-size: cover` dengan `` dan `` Elemen Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!