Bagaimana untuk Mengekalkan Nisbah Aspek Imej Di Dalam Div Menggunakan CSS?

Memelihara Nisbah Aspek Imej Di Dalam Div

Selalunya, adalah wajar untuk memaparkan imej dalam div sambil mengekalkan nisbah bidangnya. Ini memastikan bahawa imej dapat dilihat sepenuhnya tanpa sebarang herotan. Untuk mencapai ini, anda boleh memanfaatkan sifat CSS tertentu.

Penyelesaian menggunakan CSS:

Di dalam div tempat imej diletakkan, tambahkan peraturan CSS berikut pada imej elemen:

max-height: 100%;
max-width: 100%;

Sifat CSS ini mengarahkan penyemak imbas untuk mengekang dimensi imej dalam sempadan div. Sifat ketinggian maks mengehadkan saiz menegak, manakala lebar maks mengehadkan saiz mendatar. Dengan menetapkan kedua-dua sifat kepada 100%, imej dikecilkan agar muat dalam div sambil mengekalkan nisbah aspek asalnya.

Contoh:

<div class="image-container">
  <img src="image.jpg" />
</div>

.image-container {
  width: 48px;
  height: 48px;
}

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

Contoh ini akan memuatkan imej 48x48 di dalam div 48x48 sambil mengekalkan nisbah bidang imej. Imej akan diubah saiz untuk dipaparkan sepenuhnya dalam div tanpa sebarang pemangkasan atau herotan.

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