Bagaimana untuk Mencapai Kefungsian `saiz latar belakang: penutup` pada Elemen HTML dengan CSS?

Cara Mencapai Saiz Latar Belakang: Kefungsian Cover pada Elemen HTML dengan CSS

Mensimulasikan kefungsian background-size:cover pada elemen HTML seperti video atau imej boleh menjadi tugas yang sukar. Walau bagaimanapun, menggunakan gabungan sifat CSS, adalah mungkin untuk mencipta penyelesaian yang meniru gelagat yang diingini tanpa sebarang skrip.

Penyelesaian CSS

Kunci untuk mencapai latar belakang -size:cover adalah untuk menetapkan ketinggian, lebar dan dimensi minimum elemen video dengan sewajarnya. Dengan menggunakan nilai yang dikira berdasarkan nisbah bidang video (cth., 16:9), kami boleh memastikan bahawa video sentiasa berskala untuk menutup ruang yang tersedia sambil mengekalkan nisbah bidangnya.

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

CSS ini memastikan bahawa video merangkumi keseluruhan elemen induk, tanpa mengira saiznya.

Pemusatan Pilihan

Jika mahu, kami juga boleh memusatkan video dalam elemen induk menggunakan sifat berikut :

<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 berfungsi dengan sempurna tanpa sebarang kes tepi, menawarkan penyelesaian yang boleh dipercayai untuk mensimulasikan background-size:cover pada elemen video. Perlu diingat bahawa sifat CSS3 yang digunakan mungkin tidak serasi dengan penyemak imbas lama, jadi penyelesaian berasaskan skrip mungkin diperlukan untuk keserasian merentas penyemak imbas penuh.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kefungsian `saiz latar belakang: penutup` pada Elemen HTML dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!