Object-Fit: Penutup Gagal dalam IE dan Edge, Bagaimana untuk Membetulkan?

Object-Fit: Penutup Gagal dalam IE dan Edge, Bagaimana untuk Membetulkan?

Menggunakan object-fit: cover; dalam CSS untuk mengekalkan ketinggian imej yang konsisten berfungsi dengan lancar merentas pelayar. Walau bagaimanapun, dalam IE dan Edge, isu pelik timbul. Apabila menskala penyemak imbas, imej mengubah saiz lebar dan bukannya mengezum ketinggian, mengherotkan penampilannya.

Untuk menyelesaikan isu ini, kami menggunakan penyelesaian CSS yang bijak yang menyelesaikan masalah:

< pra>kedudukan: mutlak;
atas: 50%;
kiri: 50%;
transformasi: terjemah(-50%, -50%);
tinggi: 100%;
lebar : auto; // Untuk blok menegak
tinggi: auto;
lebar: 100%; // Untuk blok mendatar

Gabungan ini meletakkan imej di tengah menggunakan kedudukan mutlak, menghapuskan isu dengan object-fit: cover dalam IE dan Edge. Imej kini akan berskala secara berkadar, mengekalkan kesan yang diingini tanpa herotan.

Untuk menggambarkan keberkesanan penyelesaian, pertimbangkan tunjuk cara berikut:

Demonstrasi Saiz Semula Imej

Pendekatan ini memastikan gelagat imej yang konsisten merentas semua penyemak imbas, dengan berkesan menangani isu padanan objek: penutup dalam IE dan Edge.

Atas ialah kandungan terperinci Object-Fit: Penutup Gagal dalam IE dan Edge, Bagaimana untuk Membetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!