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

Menyelesaikan Object-Fit: Herotan Cover dalam IE dan Edge

Dalam situasi di mana imej tertentu perlu mengekalkan ketinggian yang konsisten menggunakan CSS object-fit: cover; harta, pengguna mungkin menghadapi masalah dalam pelayar IE dan Edge. Apabila menskala penyemak imbas, imej mengubah saiz lebar dan bukannya mengezum, menyebabkan herotan.

Untuk menyelesaikan masalah ini, pertimbangkan pendekatan CSS berikut:

1. Letakkan imej sepenuhnya dalam bekasnya:

<code class="css">position: absolute;</code>

2. Pusat imej menggunakan gabungan berikut:

<code class="css">top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

3. Tetapkan dimensi berikut untuk imej:

<code class="css">// For vertical blocks (height greater than width):
height: 100%;
width: auto;

// For horizontal blocks (width greater than height):
height: auto;
width: 100%;</code>

Pendekatan ini meniru kesan kesesuaian objek: penutup; dan memastikan tingkah laku yang konsisten merentas semua penyemak imbas, termasuk IE dan Edge.

Untuk demonstrasi praktikal, rujuk:

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

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