css - Bagaimana untuk menulis susun atur responsif dengan imej latar belakang

Question

Sama seperti ini, saya sekarang ingin membuat komponen dengan imej latar belakang, tetapi imej latar belakang tidak boleh 100%, dan kemudian mesti ada kandungan di tengah, imej di sebelah kiri dan teks di sebelah kanan jadikan ia responsif

ringa_lee · Answer

Cubalah background-size: cover;

phpcn_u1582 · Answer

kedudukan latar belakang, digunakan bersama dengan saiz latar belakang, adakah anda telah mencubanya

大家讲道理 · Answer

Anda boleh mengkaji dengan teliti beberapa halaman Apple Beberapa halamannya menggunakan imej latar belakang dan menyesuaikan diri - sudah tentu, reka letaknya juga agak mudah. Prinsipnya ialah CSS3 Media Query.

Saya biasanya menggunakan 2 penyelesaian:

Sistem susun atur grid 12 lajur (lebar, apungan, tindak balas berurutan);
reka letak, saiz fon, gambar penjimatan aliran yang disesuaikan
position 属性或 flex).

untuk mentakrifkan

parameter sebarisprops, dan kemudian komponen akan menentukan gaya reka letak secara dalaman (beberapa reka letak dipratetap ); Untuk imej latar belakang, anda boleh menggunakan atribut

untuk melaksanakan paparan imej adaptif (autoisi), atau anda boleh menggunakan Media Query untuk menentukan paparan berbeza pada peranti berbeza (contohnya: imej desktop mempunyai lebar yang lebih lebar daripada ketinggian, mudah alih imej skrin menegak mempunyai ketinggian lebih besar daripada lebar) ) gambar (menjimatkan trafik).

background-size 或 background-position: center centerSaya fikir: Cuba untuk tidak menggunakan latar belakang sebagai sebahagian daripada reka letak kandungan, melainkan pereka bentuk menyediakan anda dengan saiz dan pelan penyesuaian imej yang mencukupi!