Bagaimana untuk mencapai reka bentuk responsif sambil mengekalkan dimensi imej tetap?

Question

Saya mempunyai CSS berikut (menggunakan Bootstrap) untuk mengubah saiz imej supaya muat ke dalam bekas 16:9 tanpa regangan:

<span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px;
ketinggian: 216px">
                <img
                  :src="slotProps.item.itemImageSrc"
                  :alt="slotProps.item.alt"
                  style="max-width: 100%; max-height: 100%"
                />
              </span>

Kaedah ini berfungsi, tetapi apabila saya menggunakannya dalam grid Bootstrap, imej melimpahi grid (saya fikir kerana saya menetapkan saiz dengan nilai mutlak). Bagaimanakah saya boleh mengubah saiz imej tetapi tidak melimpah?

(Maklumat latar belakang: Ini sedang digunakan dalam komponen galeri, imej yang masuk mungkin berbeza saiz, jadi saya perlu mengubah saiz semuanya untuk dipaparkan dalam bekas saiz yang sama, mungkin terdapat yang hitam di bahagian atas atau jidar bawah)

Answer 1

Untuk menyelesaikan masalah ini, anda boleh menggunakan object-fit sifat CSS. Atribut muat objek menentukan cara imej harus diubah saiz agar muat pada bekasnya. Nilai penutup akan mengubah saiz imej untuk mengisi keseluruhan bekas sambil mengekalkan nisbah bidangnya.

<span class="bg-dark d-flex justify-content-center align-items-center">
  <img
    :src="slotProps.item.itemImageSrc"
    :alt="slotProps.item.alt"
    style="object-fit: cover; max-width: 100%; max-height: 100%"
  />
</span>