Bagaimanakah saya boleh menskalakan imej agar sesuai dengan kotak sempadan dalam CSS sambil mengekalkan nisbah aspeknya?

Skalakan Imej untuk Muatkan Kotak Sempadan

Menskalakan imej secara berkadar dalam kotak sempadan menggunakan CSS sahaja kelihatan seperti tugas yang mudah. Walau bagaimanapun, pendekatan ini gagal apabila hasil yang diingini adalah untuk membesarkan imej sehingga ia memenuhi sepenuhnya satu dimensi kotak sempadan.

Penyelesaian CSS Sahaja

Mujurlah, CSS3 menawarkan penyelesaian kepada dilema ini. Dengan memanfaatkan sifat imej latar belakang dan saiz latar belakang, anda boleh menskalakan imej dalam kotak sempadan mengikut keperluan.

Pelaksanaan

Untuk melaksanakan penyelesaian ini, ikut langkah berikut:

1. Buat Kotak Sempadan: Sertakan imej dalam elemen HTML yang akan berfungsi sebagai kotak sempadan.
2. Tetapkan Imej Latar Belakang: Takrifkan imej sebagai imej latar belakang untuk kotak pembanding.
3. Dayakan Pengekalan Latar Belakang: Tentukan saiz latar belakang: mengandungi untuk memastikan imej diskalakan agar muat dalam kotak sempadan semasa mengekalkan nisbah aspeknya.

Contoh

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
}</code>

Pertimbangan Tambahan

• Keserasian Pelayar: Penyelesaian ini serasi dengan penyemak imbas moden, seperti yang disahkan oleh CanIUse.com.
• Memusatkan Imej: Untuk memusatkan imej dalam kotak sempadan, gunakan CSS berikut:

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

Dengan menerima teknik CSS ini, anda boleh menskalakan imej secara berkesan untuk mengisi kotak sempadan sambil mengekalkan perkadaran asalnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menskalakan imej agar sesuai dengan kotak sempadan dalam CSS sambil mengekalkan nisbah aspeknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!