Bagaimanakah Saya Boleh Memusatkan dan Memangkas Imej Secara Automatik kepada Saiz Persegi Tertentu Menggunakan CSS?

Memusatkan dan Memangkas Imej Secara Automatik

Selalunya, terdapat keperluan untuk memangkas dan memusatkan imej agar sesuai dengan dimensi persegi tertentu tanpa perlu pengetahuan terdahulu tentang saiz imej. Ini boleh dicapai dengan menggunakan sifat imej latar belakang CSS.

Memusatkan Imej dengan Pemotongan Dinamik

Untuk memusatkan dan memangkas imej secara dinamik, ikut langkah berikut:

1. Tentukan elemen HTML dengan lebar dan ketinggian tertentu, mewakili potong yang dikehendaki dimensi.
2. Gunakan sifat imej latar belakang untuk menetapkan URL imej.
3. Jajarkan imej di tengah menggunakan kedudukan latar belakang: tengah tengah;.
4. Halang imej daripada mengulang dengan menetapkan latar belakang-ulang: tidak-ulang;.

Contoh Kod:

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

<div class="center-cropped">

Dengan menggunakan teknik ini, imej akan dipusatkan secara automatik dan dipangkas dalam dimensi yang ditentukan, tanpa mengira saiz asalnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan dan Memangkas Imej Secara Automatik kepada Saiz Persegi Tertentu Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!