Bagaimanakah Saya Boleh Memaksa Ubah Saiz Imej dalam CSS Semasa Mengekalkan Nisbah Aspek?

Memelihara Nisbah Aspek sambil Mengubah Saiz Imej secara Paksa

Apabila berurusan dengan imej dalam pembangunan web, adalah penting untuk mengekalkan nisbah aspek asal untuk mengelakkan penyelewengan. Secara lalai, menskalakan imej menggunakan sifat CSS seperti lebar dan tinggi boleh mengubah nisbah bidangnya.

Menangani Isu

Untuk menangani isu ini, peraturan CSS boleh digunakan untuk paksa mengubah saiz sambil mengekalkan nisbah bidang. Coretan kod berikut mencapai fungsi ini:

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

Paparan: blok; harta memastikan bahawa imej berkelakuan seperti elemen blok, mengambil lebar penuh yang tersedia. lebar maksimum: 500px; menetapkan lebar maksimum untuk imej, memastikan ia tidak melebihi 500 piksel.

Yang penting, lebar: auto; dan ketinggian: auto; benarkan imej melaraskan saiznya secara automatik sambil mengekalkan nisbah bidangnya. Ini bermakna imej akan mengubah saiznya agar sesuai dengan lebar maksimum yang ditentukan tanpa memesongkan ketinggiannya atau menyebabkan sebarang regangan atau squishing.

Contoh Penggunaan

Pertimbangkan kod berikut:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png">

Menggunakan peraturan CSS pada imej ini akan memaksanya untuk mengubah saiz dalam maksimum yang ditentukan lebar, sambil mengekalkan nisbah bidangnya.

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