Bagaimanakah Saya Boleh Ubah Saiz dan Pangkas Imej kepada Dimensi Tertentu Hanya Menggunakan CSS?

Paparkan Imej Saiz Semula dan Pangkas dengan CSS

Masalah:

Anda mahu paparkan imej daripada URL pada lebar dan ketinggian tertentu, walaupun nisbah bidangnya berbeza daripada dimensi yang dikehendaki. Matlamatnya adalah untuk mengubah saiz imej sambil mengekalkan nisbah asalnya, dan kemudian memangkasnya kepada saiz yang dikehendaki.

Penyelesaian CSS:

Untuk mencapai kedua-dua saiz semula dan pemangkasan, anda boleh menggabungkan teknik berikut:

• Saiz semula: Gunakan HTML sifat lebar dan ketinggian elemen img untuk mengubah saiz imej. Ini akan mengekalkan nisbah bidang imej asal.
• Pemotongan: Cipta elemen bekas (cth., div) dengan dimensi akhir yang diingini. Tetapkan limpahan tersembunyi untuk bekas ini untuk memangkas sebarang imej berlebihan.

Pelaksanaan:

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.crop img {
  width: 400px;
  height: 300px;
  margin: -75px 0 0 -100px;
}

<div class="crop">
  <img src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="Image">
</div>

Dalam contoh ini:

• Imej akan diubah saiz kepada lebar 200px dan ketinggian 150px (dengan nisbah aspek dikekalkan).
• Sifat jidar digunakan untuk memangkas imej dengan mengalihkan kedudukannya dalam bekas.
• Sifat limpahan kontena ditetapkan untuk disembunyikan untuk memastikan hanya bahagian yang dikehendaki daripada imej dipaparkan.

Keputusan:

Gabungan ini membolehkan anda untuk memaparkan imej pada saiz tertentu sambil mengekalkan nisbah aspek asalnya dan memangkasnya agar sesuai dengan dimensi yang anda inginkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Ubah Saiz dan Pangkas Imej kepada Dimensi Tertentu Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!