Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengekalkan Nisbah Aspek Imej Apabila Mengubah Saiz dalam CSS?

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

Linda Hamilton
Lepaskan: 2024-11-13 02:17:02
asal
817 orang telah melayarinya

How to Maintain Image Aspect Ratio When Resizing in 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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan