Mengapa `object-fit` tidak berfungsi dengan betul dengan Imej Di Dalam Bekas Flexbox?

Mengapa object-fit Tidak Berfungsi dalam Flexbox?

Apabila cuba menggunakan object-fit: cover property pada imej dalam lajur flexbox, pengguna mungkin menghadapi isu imej tidak mengubah saiz seperti yang diharapkan. Penjelasan terletak pada spesifikasi sifat muat objek.

Menurut spesifikasi CSS, muat objek menentukan pemasangan kandungan elemen yang diganti dalam kotak yang ditetapkan oleh ketinggian dan lebar yang digunakan. Dalam kes imej, elemen yang diganti ialah imej itu sendiri, bukan bekasnya. Oleh itu, sifat muat objek digunakan pada ketinggian dan lebar imej itu sendiri, bukannya dimensi item fleksibel.

Penyelesaian:

Untuk mengatasi isu ini, susun semula flexbox setup supaya imej itu sendiri menjadi item flex. Ini membolehkan sifat muat objek digunakan dengan berkesan pada imej, menghasilkan tingkah laku saiz semula yang diingini.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Dengan menjadikan imej sebagai item fleksibel, sifat muat objek kini boleh dengan betul muatkan imej dalam ruang bekas fleksibel yang diperuntukkan, menghasilkan tingkah laku saiz penutup yang diingini.

Atas ialah kandungan terperinci Mengapa `object-fit` tidak berfungsi dengan betul dengan Imej Di Dalam Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!