Bagaimana Memasukkan Imej dengan Elok dalam Div Sambil Mengekalkan Nisbah Aspek?

Mengekalkan Nisbah Aspek Imej dalam Div

Soalan:

Bagaimanakah seseorang boleh memuatkan imej dengan kemas dalam div elemen sambil mengekalkan nisbah bidangnya, memastikan tiada bahagian imej dipangkas atau diherotkan?

Jawapan:

Untuk mencapai ini menggunakan CSS, gunakan sifat berikut:

img {
  max-height: 100%;
  max-width: 100%;
}

1. tinggi maks: 100%;: Menetapkan ketinggian maksimum imej kepada 100% daripada div bekasnya. Ini memastikan bahawa imej tidak akan melimpahi ketinggian div.
2. lebar maksimum: 100%;: Serupa dengan ketinggian maks, tetapi untuk lebar. Ini menetapkan lebar maksimum imej kepada 100% daripada div bekasnya.

Penjelasan:

Dengan menggabungkan kedua-dua sifat ini, imej akan mengecut dengan berkesan untuk dimuatkan dalam div sambil mengekalkan nisbah aspek asalnya. Imej akan dikecilkan secara berkadar, memastikan tiada bahagian yang dipotong atau diherotkan.

Nota Tambahan:

1. Jika anda ingin memusatkan imej dalam div , tambahkan sifat CSS berikut:

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Sebagai alternatif, anda boleh menggunakan sifat muat objek untuk mencapai hasil yang serupa, walaupun ia mungkin tidak disokong dalam semua penyemak imbas.

Atas ialah kandungan terperinci Bagaimana Memasukkan Imej dengan Elok dalam Div Sambil Mengekalkan Nisbah Aspek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!