Cara Mencegah Bar Skrol dengan muat objek: Mengandungi dalam Bekas Flexbox?

Css Object-Fit: Mengandungi Mengekalkan Dimensi Imej dalam Reka Letak

Masalah:

Bila menggunakan object-fit: mengandungi untuk mengubah saiz imej dalam bekas flexbox, imej melaraskan secara responsif, tetapi lebar imej asal kekal, menyebabkan bar skrol muncul.

Penerokaan:

object-fit mentakrifkan bagaimana imej harus berkelakuan apabila bekasnya mempunyai dimensi yang berbeza daripada imej itu sendiri. object-fit: mengandungi memastikan bahawa imej muat dalam bekas tanpa memangkas, memastikan nisbah aspeknya utuh.

Atribut CSS Tiada:

Untuk menyelesaikan isu, tambahan Atribut CSS diperlukan untuk menentukan lebar dan tinggi bekas.

Penyelesaian:

Daripada bergantung pada lebar asal imej, tetapkan lebar bekas secara eksplisit menggunakan lebar . Selain itu, nyatakan ketinggian bekas untuk memadankan nisbah bidang imej menggunakan ketinggian.

Kod CSS yang dikemas kini:

<code class="css">.half-containers {
  flex: 0 1 50%;
  width: 50%;  /* Specify explicit width for the container */
  height: calc(50% / aspect-ratio);  /* Calculate height based on aspect ratio */
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}</code>

Penjelasan Konsep:

Dengan mentakrifkan lebar dan tinggi bekas secara eksplisit, kami memastikan imej boleh berskala dalam dimensi yang ditentukan sambil mengekalkan nisbah bidangnya. Ketinggian yang dikira memastikan bahawa imej muat dalam bekas tanpa mengherotkannya, walaupun lebar asalnya melebihi lebar bekas.

Atas ialah kandungan terperinci Cara Mencegah Bar Skrol dengan muat objek: Mengandungi dalam Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!