Bagaimana untuk Mencapai `object-fit: cover;` Penskalaan Imej dalam IE dan Edge?

Pembetulan CSS untuk Penskalaan Imej dalam IE dan Edge

Apabila menggunakan muat objek: penutup; Peraturan CSS untuk imej pada halaman, seseorang mungkin menghadapi masalah di mana imej mengubah saiz lebar (bukan ketinggian) dan bukannya mengezum apabila menskalakan pelayar dalam IE atau Edge. Ini mengakibatkan imej herot.

Untuk menangani isu ini, penyelesaian CSS boleh dilaksanakan:

1. Letakkan imej secara mutlak dalam bekasnya menggunakan kod berikut:

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

Ini memusatkan imej dalam bekasnya.

2. Berdasarkan orientasi imej (menegak atau mendatar), tetapkan sifat ketinggian dan lebar dengan sewajarnya:

• Untuk bongkah menegak (ketinggian lebih besar daripada lebar):

  height: 100%;
  width: auto;

• Untuk bongkah mendatar (lebar lebih besar daripada ketinggian):

  height: auto;
  width: 100%;

Ini memberikan imej padanan objek yang diingini: penutup; kesan, memastikan ia berskala secara berkadar pada saiz semula dalam IE dan Edge.

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