Bagaimana untuk Membetulkan Limpahan Imej dan Herotan dengan CSS Object-Fit?

Css Object-Fit: Mengekalkan Nisbah Aspek Imej dalam Reka Letak Responsif

Apabila menggunakan CSS object-fit: mengandungi sifat untuk memastikan imej kekal responsif dalam bekas flexbox, anda mungkin menghadapi masalah apabila reka letak mengekalkan lebar imej asal, mengakibatkan bar skrol yang tidak diperlukan.

Memahami Object-Fit

Sebelum menyelidiki isu tersebut di tangan, mari kita jelaskan cara object-fit beroperasi. Harta ini mentakrifkan cara kandungan elemen harus diskalakan dan diletakkan dalam kotak sempadannya. Apabila ditetapkan untuk mengandungi, kandungan (dalam kes kami, imej) akan mengubah saiz secara berkadar, mengekalkan nisbah bidangnya dan muat dalam ruang yang tersedia.

Isu Lebar Imej Asal

Dalam coretan kod yang disediakan, anda telah menentukan bekas dengan limpahan: auto, yang memperkenalkan bar skrol apabila kandungan melebihi lebar bekas. Walau bagaimanapun, lebar imej kekal pada saiz asalnya, menyebabkan reka letak untuk menampung dimensi awal imej.

Penyelesaian

Untuk membetulkannya, anda perlu menetapkan secara eksplisit lebar imej menggunakan sifat lebar CSS. Ini akan memastikan bahawa lebar imej mematuhi lebar bekas, membolehkan sifat muat objek menskala dan meletakkan imej dengan betul sambil mengekalkan nisbah bidangnya.

Kod Kemas Kini

Berikut ialah versi kod CSS anda yang dikemas kini yang merangkumi sifat lebar:

<code class="css">img {
  object-fit: contain;
  width: 100%;
}</code>

Dengan menambahkan peraturan lebar: 100%, anda mengarahkan penyemak imbas untuk menyesuaikan lebar imej dengan tepat pada bekasnya, membenarkan muat objek: mengandungi sifat berfungsi seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Limpahan Imej dan Herotan dengan CSS Object-Fit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!