Gambar adaptif atau gambar responsif adalah kombinasi metode untuk memuat gambar yang tepat berdasarkan ukuran layar atau perangkat. Gambar adaptif secara otomatis disesuaikan berdasarkan ukuran layar dan perangkat yang berbeda. Gambar adaptif memerlukan pembuatan tata letak yang berbeda untuk setiap perangkat tempat halaman web akan diakses. Gambar adaptif dapat dibuat menggunakan CSS Flexbox dengan mudah. Flexbox adalah model satu dimensi tata letak CSS yang membuat baris atau kolom. Flexbox memudahkan pembuatan struktur responsif.
Postingan kali ini akan memberikan panduan untuk membuat gambar adaptif dengan CSS Flexbox.
Bagaimana Cara Membuat Gambar Adaptif dengan CSS Flexbox?
Untuk membuat gambar adaptif menggunakan CSS Flexbox, pengguna harus terlebih dahulu membuat struktur HTML dan kemudian menerapkan CSS. Untuk demonstrasi praktis, ikuti prosedur yang disediakan di bawah ini.
Buat Struktur HTML
Membuat Pertama, buat Flexbox dengan mengatur “ menampilkan ” nilai properti menjadi “ melenturkan ' di dalam ' wadah gambar ” Selanjutnya, terapkan CSS pada gambar dengan menentukan “ gambar ' Bersama dengan ' .images-container ” nama. Pertama, atur “ melenturkan ” nilai properti menjadi “ 1 ” untuk mendistribusikan ruang kosong yang tersedia di antara gambar secara merata. Kemudian, atur “ lebar maksimal ” nilai properti menjadi “ 100% ” untuk memastikan gambar tidak melebihi lebar aslinya. Mengatur ' tinggi ” nilai properti menjadi “ mobil ” untuk mempertahankan rasio aspek. Terakhir, tambahkan spasi antar gambar dengan mengatur “ batas ” nilai properti menjadi “ 10 piksel ”: Gambar adaptif menggunakan CSS Flexbox telah berhasil dibuat. Tampilan keluaran di bawah ini sebelum penutup jendela browser: Sekarang, mari kita bungkus jendela browser untuk memeriksa apakah gambar tersebut adaptif atau tidak: Untuk membuat gambar adaptif dengan CSS Flexbox, pengguna terlebih dahulu perlu membuat struktur HTML, lalu menentukan menandai. Di dalam
tambahkan “ src ” tag untuk menentukan jalur gambar dan menambahkan gambar alternatif menggunakan “ semuanya ” tanda:
< div kelas = 'wadah gambar' >
< gambar src = 'gambar-1.jpg' semuanya = 'Gambar Pertama' >
< gambar src = 'gambar-2.jpg' semuanya = 'Gambar Kedua' >
div >
Terapkan CSS
menampilkan: melenturkan ;
bungkus fleksibel: bungkus;
}
.images-container img {
melenturkan: 1 ;
lebar maksimal: 100 % ;
tinggi: otomatis;
margin: 10 piksel;
}
Sebelum Dibungkus 
Setelah Bungkus 
Gambar di atas menegaskan bahwa gambar yang ditambahkan bersifat adaptif. Kesimpulan
menandai. Kemudian, terapkan CSS, dan di dalam CSS atur properti “display” menjadi “ melenturkan ” untuk membuat Flexbox. Tulisan ini telah menunjukkan panduan komprehensif untuk membuat gambar adaptif dengan CSS Flexbox.