Bagaimanakah CSS Boleh Memusatkan dan Memangkas Imej Saiz Tidak Diketahui Secara Dinamik?

Pemotongan dan Peletakan Imej Pusat: Penyelesaian Dinamik

Dalam bidang manipulasi imej, sering timbul keperluan untuk mengekstrak dan memaparkan segi empat sama berpusat daripada imej arbitrari. Walau bagaimanapun, dalam kes di mana saiz imej tidak diketahui, kaedah pemangkasan tradisional menjadi tidak praktikal. Untuk menangani cabaran ini, penyelesaian yang inovatif muncul.

Memanfaatkan kedudukan latar belakang CSS dan teknik saiz elemen, kami boleh memusatkan dan memangkas imej dengan berkesan dalam petak yang ditetapkan. Dengan menetapkan imej latar belakang pada bahagian tengah elemen bersaiz untuk sepadan dengan dimensi terpotong yang dikehendaki, kita boleh mencapai kesan yang diingini.

Demonstrasi Asas

Untuk menggambarkan pendekatan ini :

<div class="center-cropped" 
    >

Coretan HTML ini mencipta elemen div dengan kelas "dipotong tengah". Kami kemudian menggayakannya dengan CSS:

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

Di sini, kami menetapkan lebar dan tinggi untuk menentukan dimensi imej yang dipangkas. Sifat kedudukan latar belakang memusatkan imej dalam elemen, dan ulangan latar belakang menghalangnya daripada berjubin atau berulang. Ambil perhatian bahawa URL dalam atribut gaya ialah imej pemegang tempat; anda harus menggantikannya dengan URL imej sebenar.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Memusatkan dan Memangkas Imej Saiz Tidak Diketahui Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!