Rumah >hujung hadapan web >tutorial css >Mengapa `object-fit` Saya Tidak Berfungsi dalam Flexbox?

Mengapa `object-fit` Saya Tidak Berfungsi dalam Flexbox?

Barbara Streisand
Barbara Streisandasal
2024-12-10 03:56:12880semak imbas

Why Isn't My `object-fit` Working in Flexbox?

Objek-Fit Tidak Berfungsi dalam Flexbox: Sebab dan Penyelesaian

Object-Fit ialah sifat CSS yang mengawal cara imej diubah saiz untuk memuatkan bekasnya. Walau bagaimanapun, dalam reka letak flexbox, nampaknya object-fit tidak berfungsi seperti yang diharapkan.

Alasannya ialah object-fit beroperasi pada elemen yang diganti itu sendiri, bukan bekasnya. Dalam kes ini, imej adalah elemen yang diganti, bukan div pembalut.

Untuk menjadikan padanan objek berfungsi seperti yang dimaksudkan dalam flexbox, imej harus menjadi item flex. Dengan berbuat demikian, anda menetapkan sifat fleksibel pada imej itu sendiri, memastikan kesesuaian objek digunakan dengan betul.

Berikut ialah kod yang diubah suai:

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

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

Dalam kod yang dikemas kini ini, imej adalah item flex, dan object-fit digunakan padanya secara langsung. Kini, imej akan diubah saiz untuk menutup keseluruhan bekasnya sambil mengekalkan nisbah bidangnya.

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

Kenyataan:
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