Bagaimana untuk Mengekalkan Nisbah Aspek Imej Apabila Mengubah Saiz dalam CSS?

Menyelesaikan Isu Saiz Semula Imej dalam CSS

Apabila berhadapan dengan isu saiz semula imej dalam panel pentadbir, memahami interaksi sifat CSS adalah penting. Satu isu sedemikian dihadapi apabila mengubah saiz imej yang pada mulanya dipaparkan dengan sempurna. Walau bagaimanapun, apabila mengubah saiz penyemak imbas, imej mengecut secara tidak seimbang.

Untuk menanganinya, kuncinya ialah mengekalkan nisbah bidang imej. Ini bermakna membenarkan satu dimensi dibetulkan sementara membenarkan yang lain melaraskan secara automatik. Dengan menyematkan lebar dan menetapkan ketinggian kepada auto, perkadaran asal imej dikekalkan.

Sebagai contoh, pertimbangkan coretan kod berikut:

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

Dalam contoh ini, ". kelas betul" mengekalkan nisbah bidang dengan menetapkan lebar kepada nilai tetap (200px) dan membiarkan ketinggian melaraskan secara automatik. Ini memastikan bahawa imej tidak terbentang apabila diubah saiznya.

Sebaliknya, kelas ".tidak betul" menyebabkan imej regangan kerana kedua-dua lebar dan ketinggian ditetapkan. Ini mengganggu nisbah bidang dan menyebabkan imej kehilangan dimensi yang dimaksudkan.

Dengan menggunakan sifat CSS yang sesuai, anda boleh memastikan imej anda berubah saiz dengan anggun dan mengekalkan integriti visualnya tanpa mengira saiz tetingkap penyemak imbas.

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