Mengapa `object-fit` Tidak Berfungsi dengan Bekas Flexbox?

Mengapa object-fit Tidak Berfungsi dalam Flexbox

Walaupun mengalami masalah dengan pelaksanaan object-fit dalam flexbox, di mana imej dalam lajur yang sama lebar tetap tidak dilaraskan, terdapat penjelasan logik yang berakar umbi dalam harta itu takrifan.

Seperti yang digariskan dalam spesifikasi, kesesuaian objek menentukan cara elemen yang diganti (imej dalam kes ini) muat dalam kotak yang ditentukan oleh ketinggian dan lebarnya. Walau bagaimanapun, perkara penting untuk difahami ialah kotak berkenaan dengan imej itu sendiri, bukan bekasnya.

Oleh itu, untuk menyelesaikan isu itu, alih keluar bekas itu sama sekali dan tetapkan status item fleksibel terus kepada imej, seperti yang ditunjukkan dalam coretan kod yang dikemas kini:

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

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

Atas ialah kandungan terperinci Mengapa `object-fit` Tidak Berfungsi dengan Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!