Bagaimana untuk Menghalang Imej daripada Mengecut Tidak Sekata pada Saiz Pelayar?

CSS: Mengecilkan Imej pada Saiz Penyemak Imbas

Apabila mengkonfigurasi imej melalui panel pentadbir, pengguna mungkin menghadapi masalah di mana imej mengecut secara tidak seimbang apabila tetingkap penyemak imbas diubah saiznya. Isu ini boleh diatasi dengan memahami interaksi antara sifat CSS dan nisbah bidang imej.

Peraturan CSS yang disediakan pada mulanya merangkumi kedua-dua sifat lebar maks dan ketinggian, yang boleh menyebabkan pengecutan yang tidak diingini apabila penyemak imbas diubah saiz. Untuk mengelakkan ini, seseorang mesti menentukan hanya satu dimensi (biasanya lebar maksimum) dan menetapkan satu lagi kepada auto.

Contoh:

.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

Pendekatan ini mengekalkan nisbah aspek imej sambil membenarkan ia berskala dengan sewajarnya agar sesuai dengan ruang yang ada. Seperti yang dilihat dalam contoh "betul" di bawah, imej mengekalkan perkadarannya dan tidak meregang atau mengecut secara berlebihan.

Salah:

max-width: 100%;
width: 100px;
height: 100px;

Betul :

max-width: 200px;
height: auto;

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Imej daripada Mengecut Tidak Sekata pada Saiz Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!