Bagaimana untuk Mengekalkan Nisbah Aspek Imej dalam Flexbox?

Mengekalkan Nisbah Aspek Imej dalam Flexbox

Dalam susun atur flexbox, imej cenderung meregang atau mengecut secara tidak seimbang untuk memenuhi lebar bekas. Untuk mengekalkan nisbah bidang semasa melaraskan ketinggian imej, pertimbangkan penyelesaian berikut:

Pilihan 1: muat objek

Tambahkan sifat muat objek pada imej:

img {
  object-fit: contain;
}

Ini memastikan imej mengekalkan dimensinya semasa dimuatkan dalam bekas.

Pilihan 2: Peraturan Flexbox

Gunakan sifat flexbox berikut pada imej:

img {
  align-self: center;
  flex: 0 0 auto;
}

• selaraskan diri: tengah menjajarkan imej secara menegak dalam bekas.
• flex: 0 0 automatik menghalang imej daripada regangan atau mengecut di sepanjang paksi lentur (iaitu, menegak).

Contoh Langsung:

<div class="slider">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

.slider {
  display: flex;
}

.slider img {
  margin: 0 5px;
}

/* Option 1: object-fit */
.img-contain {
  object-fit: contain;
}

/* Option 2: Flexbox Rules */
.img-flex {
  align-self: center;
  flex: 0 0 auto;
}

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Imej dalam Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!