Bagaimana Membuat Imej Mengisi Div secara Proporsional dalam CSS?

Cara Memaparkan Imej Berkadar dalam Div yang Diisi

Dalam CSS, mencapai kesesuaian sempurna untuk imej dalam div boleh mencabar, terutamanya jika anda mahu mengekalkan nisbah aspek mereka. Berikut ialah penyelesaian ringkas untuk mengisi div dengan imej sambil mengekalkan perkadaran:

Menggunakan Pemasangan Objek

Kebanyakan penyemak imbas moden menyokong sifat muat objek, membolehkan anda mengawal bagaimana imej dipaparkan dalam bekasnya. Untuk senario ini, anda boleh menggunakan CSS berikut:

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Penyesuaian objek: mengandungi memastikan imej memenuhi bekas sambil mengekalkan perkadaran asalnya. Ia juga menghalang imej daripada dipangkas atau diherotkan.

Menggunakan Flexbox

Pendekatan alternatif ialah menggunakan Flexbox. Teknik ini membolehkan anda memusatkan dan mensaiz imej secara fleksibel dalam div, mencapai kesan yang diingini:

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

Dalam senario ini, imej akan sentiasa mengisi ketinggian atau lebar div yang tersedia sambil mengekalkan nisbah bidangnya.

Contoh Pelaksanaan

Untuk melaksanakan ini penyelesaian, hanya gunakan CSS yang sesuai pada div yang mengandungi imej:

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="Bagaimana Membuat Imej Mengisi Div secara Proporsional dalam CSS?" >
</div>

Nota: Pastikan sifat limpahan ditetapkan kepada tersembunyi pada div untuk mengelakkan imej daripada melimpah di luar sempadannya.

Atas ialah kandungan terperinci Bagaimana Membuat Imej Mengisi Div secara Proporsional dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!