Bagaimanakah Saya Boleh Memusatkan Imej Bersaiz Besar Dalam Div Menggunakan CSS?

Memusatkan Imej Bersaiz Besar dalam Div Menggunakan CSS

Apabila bekerja dengan susun atur bendalir di mana lebar div berbeza-beza, memusatkan imej bersaiz besar dalam div boleh menjadi mencabar. Imej mungkin bermula di tepi kiri, meninggalkannya di luar tengah ke kanan.

Untuk menangani isu ini, kami mencadangkan penyelesaian CSS yang memusatkan imej dengan berkesan, mewujudkan potongan limpahan sekata pada kedua-dua tepi:

<code class="css">.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}</code>

Div induk menetapkan kedudukan relatif dan mengandungi limpahan. Div kanak-kanak, yang mengandungi imej, mempunyai kedudukan mutlak dengan nilai atas, bawah, kiri dan kanan yang sangat negatif. Nilai negatif ini secara berkesan menolak imej melepasi kawasan yang boleh dilihat div. Margin: sifat auto memastikan pemusatan automatik imej dalam div induk.

Teknik ini membolehkan imej mengekalkan nisbah bidang asalnya, menghapuskan sebarang isu pensaiz semula yang dikenakan oleh penyemak imbas yang boleh menjejaskan kualiti imej. Hasilnya ialah imej bersaiz besar berpusat dengan limpahan yang dipangkas sama rata pada kedua-dua belah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Imej Bersaiz Besar Dalam Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!