Bagaimana Memasukkan Imej Dalam Div Sambil Mengekalkan Nisbah Aspek?

Memelihara Nisbah Aspek Semasa Memasang Imej dalam Div

Apabila bekerja dengan reka bentuk web, tugas biasa adalah untuk memuatkan imej dalam div sambil mengekalkan nisbah aspeknya. Ini memastikan bahawa imej tidak diherotkan dan mengekalkan perkadaran yang dimaksudkan. Untuk mencapai ini dalam HTML dan CSS, kami boleh menggunakan kod berikut:

.my-div {
   width: 48px;
   height: 48px;
   overflow: hidden;
}

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

Di dalam CSS, kami mentakrifkan kelas untuk div (my-div) dengan lebar dan ketinggian tetap. Sifat limpahan ditetapkan kepada tersembunyi untuk menyembunyikan sebarang kandungan imej yang melangkaui sempadan div.

Dalam div, kelas imej (my-img) ditentukan. Caranya di sini terletak pada menetapkan ketinggian maksimum dan lebar maksimum kepada 100%. Ini membolehkan imej untuk mengisi sepenuhnya ruang dalam div sambil mematuhi nisbah aspeknya sendiri. Tanpa peraturan ini, imej akan meregangkan atau meregang agar sesuai dengan dimensi div, mengakibatkan herotan.

Dengan melaksanakan kod ini, anda boleh berjaya memuatkan imej dalam div sambil mengekalkan nisbah bidangnya. Teknik ini amat berguna untuk memastikan paparan imej responsif merentas pelbagai saiz skrin dan peranti.

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