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

Memelihara Perkadaran Imej Semasa Saiz Menggunakan CSS: Panduan Komprehensif

Dalam bidang pembangunan web, selalunya perlu mengubah saiz imej agar sesuai pelbagai keperluan paparan. Walau bagaimanapun, adalah penting untuk mengekalkan nisbah bidang imej untuk mengelakkan regangan atau herotan yang tidak diingini. Untuk mencapai matlamat ini, CSS menawarkan penyelesaian yang elegan.

Kesesuaian Objek: Kunci Mengekalkan Perkadaran

Sifat muat objek mengawal cara kandungan elemen yang diganti , seperti img atau video, hendaklah diubah saiznya agar muat pada bekasnya. Dengan menggunakan sifat ini, kami boleh menentukan cara imej harus bersaiz sambil mengekalkan nisbah bidang asalnya.

Mengekalkan Perkadaran Semasa Mengisi Elemen

Untuk mengisi elemen dengan imej sambil mengekalkan perkadaran, gunakan nilai "penutup" untuk sifat muat objek. Ini memberitahu penyemak imbas untuk mengubah saiz imej untuk mengisi elemen sepenuhnya, sambil memangkas sebarang kandungan berlebihan dari tepi untuk memastikan nisbah bidang dikekalkan.

Contohnya:

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Imej Semasa Mengubah Saiz dengan CSS?" >

Demonstrasi Kod

Dalam contoh di atas, kelas penutup menggunakan object-fit: cover property untuk memastikan skala imej untuk mengisi elemen dengan lebar 150px dan ketinggian 100px. Walaupun dimensi asal imej (lebar 242px, ketinggian 363px), ia berskala dan dipangkas untuk mengekalkan nisbah bidangnya dalam saiz elemen yang ditentukan.

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!