Bagaimana untuk Memangkas Auto dan Memusatkan Imej Arbitrari dalam Dataran Tertentu?

Auto-Memotong dan Memusatkan Imej Arbitrari

Memandangkan imej yang tidak diketahui dimensi, tugas memotong segi empat sama dari tengahnya dan memaparkannya dalam petak yang ditentukan memerlukan penyelesaian dinamik.

Menggunakan Latar Belakang Imej

Satu pendekatan melibatkan penggunaan imej latar belakang yang diposisikan secara berpusat dalam elemen bersaiz kepada dimensi terpotong yang dikehendaki.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div>

Kaedah ini memanfaatkan keupayaan CSS untuk menskala dan meletakkan latar belakang secara automatik imej, memastikan ia kekal di tengah dan dipangkas dalam dimensi yang ditentukan, tanpa mengira saiz imej asal.

Atas ialah kandungan terperinci Bagaimana untuk Memangkas Auto dan Memusatkan Imej Arbitrari dalam Dataran Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!