Bagaimana untuk Skala Imej untuk Mengisi Kotak Sempadan Sambil Mengekalkan Nisbah Aspek dalam CSS?

Menskalakan Imej untuk Mengisi Kotak Sempadan Memelihara Nisbah Aspek

Menskalakan imej agar dimuatkan dalam kotak sempadan sambil mengekalkan nisbah aspek boleh menimbulkan cabaran dalam CSS.

Pertimbangkan kes penggunaan berikut:

• Kes Penggunaan 1: Imej lebih besar daripada bekas.
• Gunakan Kes 2: Imej lebih kecil daripada bekas (kecilkan).
• Gunakan Kes 3: Imej lebih kecil daripada bekas (besarkan).

Sifat CSS standard lebar maks dan ketinggian maks hanya berfungsi apabila imej lebih besar daripada bekas (Gunakan Kes 1 dan 2).

Nasib baik, CSS3 menawarkan penyelesaian untuk Kes Penggunaan 3. Dengan menetapkan imej sebagai imej latar belakang dan menggunakan sifat bersaiz latar belakang dengan nilai kandungan, imej boleh ditingkatkan untuk mengisi bekas tanpa memesongkan nisbah bidangnya.

HTML:

<div class='bounding-box'>
</div>

CSS:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Untuk memusatkan imej dalam bekas:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Penyelesaian ini serasi dengan kebanyakan penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Skala Imej untuk Mengisi Kotak Sempadan Sambil Mengekalkan Nisbah Aspek dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!