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

Mengautomasikan Pemotongan dan Pemusatan Imej

Apabila bekerja dengan imej yang berbeza-beza saiz, keperluan untuk memangkas dan memusatkan imej secara automatik dalam kawasan tertentu timbul dimensi persegi. Tidak seperti pendekatan sebelumnya yang bergantung pada saiz imej yang diketahui, penyelesaian yang lebih mantap diperlukan.

Satu pendekatan yang berkesan ialah menggunakan imej latar belakang. Dengan memusatkan imej dalam elemen bersaiz pada dimensi pemangkasan yang diingini, kita boleh mencapai hasil yang diingini.

Contoh Pelaksanaan

Contoh asas ini menunjukkan pendekatan:

 lebar: 100px;<br> tinggi: 100px;<br> kedudukan latar belakang: tengah tengah;<br> ulangan latar belakang: tiada ulangan;<br>}</pra></p>
<p><pra><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">>

Salin selepas log masuk

< /div>

Dalam contoh ini, Kelas ".center-cropped" mentakrifkan elemen dengan dimensi segi empat sama 100 piksel. URL imej latar belakang menghala ke imej pemegang tempat dengan saiz yang lebih besar. Penggayaan memastikan bahawa imej berada di tengah dalam elemen, menghasilkan imej segi empat sama yang dipotong dan ditengah.

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