Bagaimana untuk Mencapai Gelagat `object-fit: cover` dalam IE dan Edge?

Membetulkan Isu Nisbah Aspek dengan Imej Menggunakan Object-Fit dalam IE dan Edge

Walaupun sokongan meluas untuk sifat muat objek CSS, beberapa pelayar, seperti Internet Explorer (IE) dan Microsoft Edge, mungkin menunjukkan tingkah laku yang tidak diingini semasa menskala imej. Imej mungkin mengubah saiz lebar dan bukannya ketinggian, memutarbelitkan nisbah bidangnya.

Untuk menangani isu ini, teknik CSS berikut boleh digunakan:

1. Letakkan imej sepenuhnya dalam bekasnya:

   position: absolute;

   Salin selepas log masuk

2. Pusat imej menggunakan gabungan sifat atas, kiri dan ubah:

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

   Salin selepas log masuk

3. Laraskan ketinggian dan lebar imej bergantung pada orientasinya:

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

   Salin selepas log masuk

Pendekatan ini membolehkan imej meniru kesan padanan objek: penutup, memastikan nisbah bidang dikekalkan semasa menskala.

Berikut ialah demonstrasi langsung teknik ini:

https://jsfiddle.net/furqan_694/s3xLe1gp/

Penyelesaian ini serasi merentas pelayar, memastikan imej dipaparkan dengan betul dalam IE, Edge dan penyemak imbas moden yang lain.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Gelagat `object-fit: cover` dalam IE dan Edge?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!