Bagaimana untuk Mengekalkan Lebar Imej Asal Apabila Menggunakan CSS \'object-fit: contain\'?

Suaian objek CSS: mengandungi; Mengekalkan Lebar Imej Asal dalam Reka Letak

Apabila menggunakan CSS's object-fit: mengandungi sifat untuk mengubah saiz imej dalam bekas flexbox, imej itu sendiri mungkin berskala dengan sewajarnya manakala reka letak mengekalkan lebar imej asal. Ini boleh mengakibatkan kemunculan bar skrol mendatar.

Untuk memahami sebab ini berlaku, adalah penting untuk memahami cara muat objek beroperasi. Mari kita periksa 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="https://picsum.photos/300/200?image=1069">
</div></code>

Dalam senario ini, elemen img diarahkan untuk dimuatkan sepenuhnya dalam bekas .box sambil mengekalkan nisbah aspeknya. Walau bagaimanapun, kerana bekas itu mempunyai lebar tetap, imej itu sendiri mungkin tidak mempunyai ruang yang mencukupi untuk berkembang.

Di sinilah objek-fit: mengandungi dimainkan. Ia mengecilkan imej ke bawah agar muat dalam kekangan lebar dan ketinggian bekas. Walau bagaimanapun, lebar asal elemen img kekal sama. Ini kerana sifat lebar dan ketinggian pada elemen img hanya mempengaruhi saiz imej yang dipaparkan, bukan saiz sebenar imej asas.

Untuk menyelesaikan isu dalam kod asal anda, anda boleh mempertimbangkan:

• Menggunakan lebar: 100% dan ketinggian: auto pada elemen img, membenarkan ia berskala semula jadi mengikut nisbah bidang asalnya.
• Menambah limpahan: tersembunyi pada elemen bekas untuk mengelakkan bar skrol mendatar daripada muncul.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Lebar Imej Asal Apabila Menggunakan CSS 'object-fit: contain'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!