Gambar responsif adalah gambar yang dapat beradaptasi dengan perangkat berbeda, apa pun ukuran layarnya. Memiliki gambar responsif di situs web menjadi sangat penting saat ini. Karena tidak hanya mempercepat situs web tetapi juga menawarkan pengalaman pengguna yang keren di semua perangkat. Gambar responsif juga akan diubah ukurannya dengan mengubah ukuran browser.
Gambar responsif secara efisien beradaptasi dengan ukuran layar berbeda di perangkat berbeda. Hal ini menjamin kualitasnya tetap terjaga. Situs web responsif dengan gambar responsif pasti meningkatkan tingkat keterlibatan dan konversi. Gambar dapat dibuat responsif menggunakan CSS bersama dengan media queries.
Tulisan ini akan menggunakan HTML dan CSS untuk membuat gambar responsif.
Bagaimana Cara Membuat Gambar Responsif dengan HTML dan CSS?
Untuk membuat gambar responsif menggunakan HTML dan CSS, lakukan langkah-langkah di bawah ini:
Metode 1: Gunakan Properti “max-width”.
Cara pertama untuk membuat gambar menjadi responsif adalah dengan menggunakan “ lebar maksimal ' Properti. “ lebar maksimal Properti ” digunakan untuk menentukan lebar maksimum gambar. Jika konten melebihi lebar maksimum, tinggi elemen akan berubah.
Buat HTML
Untuk menambahkan file gambar di tag
HTML, pengguna perlu menggunakan tagTambahkan CSS
Sekarang, buat file CSS eksternal, simpan dengan ekstensi “. css ” ekstensi file, dan tautkan di dalam tag
pada file HTML. Untuk menata file gambar dalam file CSS, mulailah dengan tag img dan buka kurung kurawal. Kemudian, di dalam kurung kurawal, tambahkan “ lebar maksimal: 100% ;” untuk menyesuaikan gambar secara horizontal di dalam wadah. Selain itu, ini akan mencegah gambar terpotong. Setelah itu, tambahkan “ tinggi: otomatis ;” untuk menyesuaikan ketinggian secara otomatis, sehingga gambar ditampilkan dengan benar:gambar {
lebar maksimal : 100% ;
tinggi : mobil ;
}
Ubah ukuran jendela browser untuk memeriksa skala gambar.
Metode 2: Gunakan Properti “lebar”.
Cara lain untuk membuat gambar menjadi responsif adalah dengan memanfaatkan properti “ lebar ”. Properti ' lebar ” menentukan lebar gambar dan teks. Itu tidak mengandung margin, padding, atau batas. Dapat mengatur ukuran gambar dan teks dalam bentuk cm, px, atau %. Untuk membuat gambar responsif, cukup tetapkan “ lebar ” properti ke “ 100 %”. Pengaturan “ lebar: 100% ;” artinya membuat gambar sebesar elemen induk:
gambar {lebar : 100% ;
tinggi : mobil ; }
Di atas menegaskan bahwa gambar tersebut responsif. Untuk memeriksa apakah responsif atau tidak, cukup ubah ukuran jendela browser.
Metode 3: Terapkan Kueri Media
Kueri media CSS membantu pengguna mengubah tampilan halaman web. Kueri media CSS berisi ketentuan, setiap kali ketentuan ini terpenuhi, maka akan mengubah tampilan perangkat atau browser. Kueri media juga dapat membantu pengguna dalam membuat gambar menjadi responsif. Oleh karena itu, pertama-tama tentukan “@ media ” tag lalu tentukan “ lebar maksimal ” properti dan tetapkan lebar maksimum untuk gambar di dalam kurung kurawal. Kapan pun kondisi ini terpenuhi, gambar akan menjadi responsif. Setelah itu, tambahkan kurung kurawal, tentukan tag img, dan tentukan “ lebar: 100% ;” nilai:
@media ( lebar maksimal : 480 piksel ) {gambar {
lebar : 100% ;
}
}
Catatan : gambar hanya akan responsive jika memenuhi syarat yang ditentukan.
Kueri media CSS telah diterapkan, dan sekarang gambar akan berperilaku responsif jika diubah ukurannya ke ukuran gambar yang ditentukan. Jika tidak, ini tidak akan responsif:
Kesimpulan
Untuk membuat gambar responsif dengan HTML dan CSS, pengguna memiliki berbagai cara. Metode ini termasuk membuat gambar menjadi responsif menggunakan “ lebar maksimal ' Properti, ' lebar properti ”, dan juga dengan menerapkan kueri media CSS. Artikel ini telah menyajikan kepada pengguna solusi lengkap untuk membuat gambar responsif.