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

Barbara Streisand
Lepaskan: 2024-11-02 00:36:02
asal
964 orang telah melayarinya

How to Achieve `object-fit: cover;` Image Scaling in IE and 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%);
Salin selepas log masuk

Ini memusatkan imej dalam bekasnya.

  1. 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;
    Salin selepas log masuk
  • Untuk bongkah mendatar (lebar lebih besar daripada ketinggian):

    height: auto;
    width: 100%;
    Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan