Bagaimana untuk Mencapai Kesan `background-size: cover` dengan `` dan `` Elemen Menggunakan CSS?

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!