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

Menskalakan Imej agar Sesuai dengan Kotak Sempadan Menggunakan CSS

Dalam situasi di mana imej lebih besar daripada bekasnya, CSS menyediakan penyelesaian yang mudah menggunakan maks -sifat lebar dan ketinggian maksimum. Walau bagaimanapun, apabila matlamatnya adalah untuk meningkatkan imej sehingga salah satu dimensinya memenuhi keseluruhan bekas, pendekatan ini menjadi pendek.

Penyelesaian CSS3

Terima kasih kepada CSS3, terdapat penyelesaian yang berdaya maju yang menggunakan sifat imej latar belakang dan saiz latar belakang:

1. HTML:

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

   Salin selepas log masuk

2. CSS:

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

   Salin selepas log masuk

Pendekatan ini memastikan imej diskalakan agar muat dalam kotak sempadan, mengekalkan nisbah bidangnya. Ujinya di sini: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain.

Penjajaran dan Keserasian

Untuk penyemak imbas yang menyokong CSS3, kaedah ini serasi sepenuhnya. Untuk memusatkan div, gunakan variasi berikut:

<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>

Dengan memanfaatkan sifat bersaiz latar belakang, CSS3 menyediakan cara yang mudah dan berkesan untuk menskalakan imej agar sesuai dengan kotak sempadan, mengekalkan perkadaran imej dan membenarkan penjajaran yang fleksibel pilihan.

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