Cara Mengubah Saiz Imej Dengan Betul Menggunakan object-fit: contain

Memahami object-fit: contain dan Image Resize

Apabila menggunakan CSS object-fit: contain untuk menjadikan imej responsif dalam bekas flexbox, ia adalah penting untuk memahami cara sifat ini mempengaruhi lebar imej. Walaupun saiz semula imej, reka letak mungkin mengekalkan saiz imej asal, menghasilkan bar skrol.

Dalam muat objek: mengandungi, imej diskalakan secara berkadar supaya keseluruhan imej kekal dalam bekas yang ditentukan sambil mengekalkan nisbah aspeknya. Ini memastikan imej kelihatan sepenuhnya dan mengelakkan pemangkasan. Walau bagaimanapun, ia tidak semestinya mengubah saiz imej agar sesuai dengan lebar bekasnya.

Untuk menangani perkara ini, anda perlu menetapkan sifat lebar CSS bekas itu kepada nilai atau peratusan tertentu yang anda inginkan imej itu untuk dipaparkan di.

Sebagai contoh, jika anda mempunyai HTML berikut:

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

Dan CSS berikut:

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

Imej akan diskalakan secara berkadaran untuk dimuatkan dalam .container, tetapi lebar imej akan kekal sebagai saiz asalnya. Untuk memuatkan lebar bekas, anda boleh menentukan lebar .container sebagai peratusan atau nilai mutlak:

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

Ingat, object-fit: contain hanya memastikan imej kelihatan dalam bekas tanpa tanam. Jika anda perlu mengubah saiz imej secara khusus kepada lebar bekas, anda perlu menetapkan sifat lebar bekas dengan sewajarnya.

Atas ialah kandungan terperinci Cara Mengubah Saiz Imej Dengan Betul Menggunakan object-fit: contain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!