Imej adaptif atau imej responsif ialah gabungan kaedah untuk memuatkan imej yang betul berdasarkan saiz skrin atau peranti. Imej penyesuaian secara automatik dilaraskan mengikut saiz skrin dan peranti yang berbeza. Imej penyesuaian memerlukan penciptaan reka letak yang berbeza untuk setiap peranti yang akan diakses halaman web. Imej penyesuaian boleh dibuat menggunakan CSS Flexbox dengan mudah. Flexbox ialah reka letak CSS model satu dimensi yang mencipta sama ada baris atau lajur. Flexbox memudahkan untuk mencipta struktur responsif.
Siaran ini akan memberikan panduan untuk mencipta imej penyesuaian dengan CSS Flexbox.
Bagaimana untuk Mencipta Imej Adaptif dengan CSS Flexbox?
Untuk mencipta imej penyesuaian menggunakan CSS Flexbox pengguna perlu mencipta struktur HTML dan kemudian menggunakan CSS. Untuk demonstrasi praktikal, ikuti prosedur yang disediakan di bawah.
Buat Struktur HTML
Buat a Mula-mula, buat Flexbox dengan menetapkan ' paparan ” nilai harta kepada “ lentur ' di dalam ' bekas imej ” Seterusnya, gunakan CSS pada imej dengan menentukan ' img 'bersama-sama dengan' .gambar-bekas ” nama. Mula-mula, tetapkan ' lentur ” nilai harta kepada “ 1 ” untuk mengagihkan ruang kosong yang ada di antara imej secara sama rata. Kemudian, tetapkan ' lebar maksimum ” nilai harta kepada “ 100% ” untuk memastikan imej tidak melebihi lebar asalnya. Menetapkan ' ketinggian ” nilai harta kepada “ auto ” untuk mengekalkan nisbah aspek. Akhir sekali, tambahkan jarak antara imej dengan menetapkan ' margin ” nilai harta kepada “ 10px ”: Imej penyesuaian menggunakan CSS Flexbox telah berjaya dibuat. Paparan output di bawah adalah sebelum pembalut tetingkap penyemak imbas: Sekarang, mari kita bungkus tetingkap penyemak imbas untuk menyemak sama ada imej itu adaptif bukan: Untuk mencipta imej adaptif dengan CSS Flexbox, pengguna perlu mencipta struktur HTML terlebih dahulu, kemudian, mentakrifkan tag. Di dalam
tambahkan “ src teg ” untuk menentukan laluan imej dan menambah imej alternatif menggunakan “ segala-galanya ” tag:
< div kelas = 'bekas imej' >
< img src = 'image-1.jpg' segala-galanya = 'Imej Pertama' >
< img src = 'image-2.jpg' segala-galanya = 'Imej Kedua' >
div >
Gunakan CSS
paparan: lentur ;
flex-wrap: bungkus;
}
.imej-bekas img {
lentur: 1 ;
lebar maksimum: 100 % ;
ketinggian: auto;
jidar: 10px;
}
Sebelum Bungkus 
Selepas Bungkus 
Imej di atas mengesahkan bahawa imej yang ditambahkan adalah adaptif. Kesimpulan
tag. Kemudian, gunakan CSS, dan di dalam CSS tetapkan sifat 'paparan' kepada ' lentur ” untuk mencipta Flexbox. Tulisan ini telah menunjukkan panduan komprehensif untuk mencipta imej penyesuaian dengan CSS Flexbox.