Membuat Gambar Responsive Dengan CSS

Ada banyak cara atau teknik dalam membuat gambar menjadi responsive dan bervariasi tergantung dari tingkat dukungan browser. Pada tutorial dumet blog ini saya akan memberikan dasar dalam membuat gambar menjadi responsive artinya gambar akan menyesuaikan dengan besarnya viewport atau layar ketika pengguna mengakses sebuah website. Mari kita mulai dengan contoh yang sederhana. Saya telah memiliki elemen <div> yang bertindak sebagai wadah atau sebuah container dari elemen <img>.

Code CSS diatas menjelaskan container memiliki properti lebar 96% dan mempunyai nilai margin auto. Memiliki max-lebar 960px sehingga tata letak akan berada di posisi tengah. Kemudian elemen <Img> dalam container memiliki properti lebar 100% sehingga lebarnya selalu sama dengan container dan akan menyesuaikan layar monitor, sehingga membuat sebuah gambar menjadi responsive. Ketinggian set ke auto sehingga gambar akan otomatis proporsional.

Perhatikan bahwa <img> elemen akan terlihat responsive dimana kita telah memberikan lebar dan tinggi attibute HTML dalam markup (yaitu width = "960" height = "640").

Sekian Blog hari ini. Selamat Mencoba, Terima Kasih

25 Agustus 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat