Bagaimanakah Saya Boleh Skalakan Imej untuk Memasukkan Kotak Sempadan Hanya Menggunakan CSS?

Menskalakan Imej agar Sesuai dengan Kotak Sempadan Menggunakan CSS Sahaja

Mencapai kesan penskalaan imej dinamik yang mengekalkan nisbah bidang boleh menjadi mencabar. Walau bagaimanapun, menggunakan teknik CSS3, kami boleh menyelesaikan masalah ini dan menskalakan imej agar sesuai dengan kotak sempadan.

Pendekatan konvensional dengan CSS ialah menggunakan sifat lebar maks dan ketinggian maks, yang menskalakan imej agar sesuai dalam bekas yang ditentukan. Walau bagaimanapun, apabila menskalakan imej, sifat ini menjadi pendek.

Penyelesaian CSS3

CSS3 menawarkan penyelesaian melalui sifat imej latar belakang dan saiz latar belakang. Dengan menetapkan imej sebagai latar belakang bekas dan menggunakan saiz latar belakang: mengandungi, kita boleh memaksa imej untuk skala sehingga dimensi mencapai lebar atau ketinggian penuh kotak sempadan.

HTML

<code class="html"><div class='bounding-box'></div></code>

CSS

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

Keserasian dan Pilihan

Penyelesaian ini disokong oleh penyemak imbas terkini . CanIUse menyediakan jadual keserasian terperinci.

Untuk memusatkan imej dalam kotak sempadan, variasi CSS boleh digunakan:

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Skalakan Imej untuk Memasukkan Kotak Sempadan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!