Bagaimana keserasian imej bootstrap berpusat

Pusat Imej Bootstrap menghadapi masalah keserasian. Penyelesaiannya adalah seperti berikut: Gunakan MX-AUTO untuk memusatkan imej secara mendatar untuk paparan: blok. Pusat menegak menggunakan flexbox atau susun atur grid untuk memastikan bahawa elemen induk secara menegak berpusat untuk menyelaraskan unsur -unsur kanak -kanak. Untuk keserasian pelayar IE, gunakan alat seperti autoprefixer untuk menambah awalan pelayar secara automatik. Mengoptimumkan saiz imej, format dan pemuatan pesanan untuk meningkatkan prestasi halaman.

Pusat gambar bootstrap: cabaran keserasian dan penyelesaian keanggunan

Bootstrap menyediakan alat yang mudah untuk memusatkan imej, tetapi dalam aplikasi sebenar, terdapat banyak masalah keserasian. Adakah anda berfikir bahawa hanya menggunakan text-center akan menjadikan semuanya berjalan lancar? Terlalu naif! Dalam artikel ini, mari kita lihat keserasian gambar bootstrap, dan kongsi beberapa pengalaman yang saya telah diringkaskan selama bertahun -tahun. Selepas membacanya, anda boleh menulis kod cepat, stabil, dan sangat serasi.

Mengapa begitu sukar untuk memusatkan gambar? Sebab akar masalah terletak pada perbezaan parsing dan rendering CSS oleh pelayar dan peranti yang berbeza. text-center hanya sah untuk teks, dan kesannya sering tidak memuaskan untuk gambar, terutama mereka yang mempunyai lebar dan ketinggian yang tidak konsisten.

Pengetahuan asas: Mekanisme susun atur Bootstrap

Bootstrap menggunakan sistem grid, yang mengawal susun atur elemen melalui container , row , col dan kelas lain. Memahami konsep asas ini adalah kunci untuk menyelesaikan masalah gambar yang berpusat. Jangan lupa, kedua-dua kawan lama display: block dan display: inline-block juga akan memainkan peranan penting dalam proses memusatkan gambar.

Teras: Biarkan gambar berada di tengah

Penyelesaian yang paling mudah ialah menggunakan mx-auto (margin-kiri: auto; margin-kanan: auto;). Barisan kod ini biasanya berfungsi dengan baik dalam bootstrap, yang membolehkan imej menjadi berpusat secara mendatar. Walau bagaimanapun, ia hanya berfungsi untuk gambar dengan display: block . Jadi, anda perlu memastikan bahawa gaya imej anda mengandungi display: block; atau gunakan tag <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Bagaimana keserasian imej bootstrap berpusat" > secara langsung, kerana secara lalai sifat paparan tag <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Bagaimana keserasian imej bootstrap berpusat" > adalah sebaris.

 <code><div> <div> <div> <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

img-fluid membolehkan lebar imej menyesuaikan diri dengan bekas induk, mx-auto berpusat secara mendatar, dan d-block memastikan bahawa imej itu menduduki satu baris. Menggabungkan ketiga -tiga ini dapat mencapai tahap yang sempurna dalam kebanyakan kes.

Pusat menegak: masalah yang lebih sukar

Ia agak mudah untuk berpusat secara mendatar, tetapi ia memerlukan lebih banyak kemahiran untuk berpusat secara menegak. Cara yang mudah dan kasar ialah menggunakan susun atur flexbox atau grid.

 <code class="html"><div class="container"> <div class="row justify-content-center"> <div class="col-md-6 d-flex align-items-center"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

Di sini, gunakan d-flex dan align-items-center untuk menetapkan bekas induk ke susun atur Flex dan memusatkan elemen kanak-kanak secara menegak (gambar). Ini adalah penyelesaian yang elegan dan cekap dengan keserasian yang baik.

Iaitu keserasian antik lama

Jika anda malangnya memerlukan sokongan untuk pelayar IE (berdoa anda tidak), maka anda memerlukan hack CSS tambahan untuk memastikan keserasian. Bahagian kandungan ini agak rumit, dan saya cadangkan menggunakan alat seperti AutoPrefixer untuk menambah awalan pelayar secara automatik.

Pengoptimuman Prestasi

Saiz imej secara langsung mempengaruhi kelajuan pemuatan halaman. Imej yang memampatkan dan menggunakan format imej yang betul (WEBP adalah pilihan yang baik) dapat meningkatkan prestasi dengan ketara. Jangan lupa gunakan lazy-loading untuk mengoptimumkan pesanan pemuatan imej.

Meringkaskan

Pusat gambar bootstrap nampaknya mudah, tetapi ia telah tersembunyi misteri dalam aplikasi sebenar. Hanya dengan memilih susun atur yang betul dan memberi perhatian kepada keserasian pelayar, anda boleh menulis kod berkualiti tinggi dan berprestasi tinggi. Ingat, kod bukan sahaja mampu berjalan, tetapi juga elegan, cekap dan mudah dijaga. Hanya dengan mengamalkan dan meringkaskan lebih banyak, anda boleh menjadi tuan pengaturcaraan sebenar.

Atas ialah kandungan terperinci Bagaimana keserasian imej bootstrap berpusat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!