Mengapa Object-Fit: Mengandungi Mengekalkan Lebar Imej Asal dalam Reka Letak Flexbox?

sesuai objek: mengandungi; Mengekalkan Lebar Imej Asal dalam Reka Letak

Mengekalkan imej responsif dalam bekas flexbox selalunya melibatkan penggunaan object-fit: contain. Semasa mengubah saiz imej menangani isu ini, reka letak asas mungkin mengekalkan lebar imej asal, memperkenalkan tatal mendatar. Tingkah laku ini ialah hasil jangkaan dari muat objek: mengandungi.

Untuk memahami tingkah laku ini, pertimbangkan contoh yang lebih mudah:

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img src="image.jpg">
</div></code>

Dalam senario ini, jika dimensi imej adalah lebih besar daripada kotak, imej akan dikecilkan untuk dimuatkan sepenuhnya dalam kotak. Walau bagaimanapun, nisbah bidang imej akan dikekalkan, berpotensi mengekalkan lebar asalnya.

Menggunakan prinsip ini pada reka letak kotak flex anda, imej akan diubah saiznya agar muat dalam bekasnya. Walau bagaimanapun, bekas itu sendiri akan meregangkan untuk menampung lebar imej asal. Untuk mengelakkan ini, anda boleh mempertimbangkan untuk menetapkan lebar maksimum untuk bekas anda atau meneroka pendekatan alternatif untuk mengekalkan responsif imej.

Atas ialah kandungan terperinci Mengapa Object-Fit: Mengandungi Mengekalkan Lebar Imej Asal dalam Reka Letak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!