Mengapa `sesuai objek` tidak berfungsi dengan Imej dalam Lajur Flexbox?

Memahami Mengapa "object-fit" Tidak Berfungsi dalam Flexbox

Dalam siasatan ini, matlamatnya adalah untuk menggunakan "objek -fit: cover" untuk menskalakan imej dalam lajur flexbox. Walau bagaimanapun, ia telah diperhatikan bahawa imej kekal tidak diselaraskan. Artikel ini menjelaskan mekanik asas dan menyediakan penyelesaian.

Prinsip Di Sebalik "object-fit"

Mengikut spesifikasi, "object-fit" mengarahkan cara kandungan elemen yang diganti sesuai dalam kotak yang ditentukan oleh ketinggian dan lebarnya.

Kuncinya Pemerhatian

Yang penting, sifat "sesuai objek" tidak digunakan pada bekas induk tetapi pada elemen yang diganti itu sendiri (dalam kes ini, imej).

Penyelesaian : Bersarang Dalam Item Fleksibel

Untuk menyelesaikan isu, imej harus menjadi item fleksibel dan bukannya bersarang dalam bekas lentur.

Kod Disemak

.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>

Atas ialah kandungan terperinci Mengapa `sesuai objek` tidak berfungsi dengan Imej dalam Lajur Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!