Bagaimana untuk Menaikkan Imej untuk Memasukkan Kotak Sempadan Hanya Menggunakan CSS?

Meningkatkan Imej agar Sesuai dengan Kotak Sempadan Menggunakan CSS-Sahaja:

Cabaran yang dikemukakan adalah untuk meningkatkan skala imej agar dimuatkan dalam kotak sempadan sementara mengekalkan nisbah aspeknya. Kod CSS yang disediakan mengendalikan penskalaan bawah tetapi bukan penskalaan atas.

Penyelesaian CSS3:

Mujurlah, CSS3 menawarkan penyelesaian:

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

Struktur HTML:

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

Dengan pendekatan ini, imej ditetapkan sebagai imej latar belakang elemen kotak sempadan. Saiz latar belakang: mengandungi sifat memastikan imej berskala untuk mengisi kotak sempadan tanpa memotong atau memesongkannya.

Keserasian:

Penyelesaian ini mempunyai keserasian yang baik dengan moden pelayar. Untuk maklumat keserasian terkini, rujuk http://caniuse.com/background-img-opts.

Memusatkan:

Untuk memusatkan imej dalam kotak sempadan , variasi berikut 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 Bagaimana untuk Menaikkan Imej untuk Memasukkan Kotak Sempadan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!