Bagaimana untuk Mengekalkan Nisbah Aspek Semasa Memasang Imej Dalam Div?

Memelihara Nisbah Aspek Semasa Memasang Imej dalam Div

Apabila memaparkan imej dalam ruang terhad, selalunya wajar untuk memuatkannya tanpa menjejaskan nisbah bidangnya. HTML dan CSS menyediakan penyelesaian yang elegan untuk mencapai matlamat ini.

Pendekatan

Kunci untuk mengekalkan nisbah bidang imej ialah menggunakan ciri CSS ketinggian maksimum dan lebar maksimum. Begini cara untuk melaksanakannya:

1. Tetapkan ketinggian dan lebar div: Tentukan ketinggian dan lebar div yang diingini untuk mengandungi imej.

2. Gunakan ketinggian maks dan lebar maks pada imej:

   • tinggi maks: 100%;: Memastikan ketinggian imej tidak melebihi ketinggian div.
   • lebar maksimum: 100%;: Menghalang lebar imej daripada tumpah ke atas lebar div.

Dengan berbuat demikian, imej akan mengecut atau mengembang dalam div sempadan sambil mengekalkan nisbah bidangnya.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

<div>

Dalam contoh ini, imej "my-image.jpg" akan melaraskan saiznya secara dinamik agar muat dalam div 48x48, mengekalkan perkadaran asalnya.

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