Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Imej Semasa Mengubah Saiz dengan CSS?

Memelihara Nisbah Aspek Semasa Saiz Semula Imej

Nisbah aspek imej adalah penting untuk mengekalkan perkadaran asal imej apabila mengubah saiz. Isu ini menjadi jelas apabila imej mempunyai atribut lebar dan ketinggian yang dipratakrifkan serta peraturan CSS tambahan digunakan.

Sebagai contoh, dalam kod yang disediakan di bawah, imej "big_image.jpg" mempunyai ketinggian dan lebar yang ditakrifkan secara eksplisit sebagai 600 dan 900 piksel, masing-masing:

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

Untuk memaksa saiz semula imej sambil mengekalkan nisbah bidang, peraturan CSS boleh diambil bekerja. Dalam kes ini, peraturan CSS berikut boleh digunakan:

img {
    max-width: 500px;
}

Walau bagaimanapun, peraturan CSS ini mungkin tidak mengecilkan imej kepada saiz yang sepatutnya. Untuk menangani perkara ini, sifat CSS tambahan harus digunakan:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

Dengan sifat CSS ini, imej "big_image.jpg" akan mengubah saiz sambil mengekalkan nisbah bidangnya. Ini digambarkan dengan kod HTML dan CSS berikut:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Imej Semasa Mengubah Saiz dengan CSS?" >

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Imej Semasa Mengubah Saiz dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!