Cara Membuat Image Responsive Menggunakan CSS3

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat sebuah image responsive menggunakan CSS3. Seperti yang kita sudah ketahui sekarang-sekarang ini sudah banyak sekali website yang menerapkan tampilan responsive. Untuk membuat tampilan website responsive tersebut kalian bisa membuatnya menggunakan CSS Framework seperti Bootstrap, Foundation dan sebagainya.

Nah pada kesempatan kali ini saya ingin mengajarkan bagaimana caranya membuat sebuah image responsive dengan menggunakan CSS3. Caranya sangat mudah sekali disini saya akan menggunakan fungsi media queries yang ada pada CSS3. Baiklah langsung saja kita praktekkan ya teman-teman.

Pertama kalian bisa siapkan 1 buah gambar, kemudian kalian bisa panggil gambar tersebut menggunakan tag <img> didalam text editor kalian seperti gambar dibawah ini.

Setelah itu kita mengatur CSS nya seperti gambar dibawah ini.

Kalian bisa lihat pada CSS diatas, dimana saya buat nilai awal width dari image tersebut adalah 600px, kemudian saya buat @media (max-width: 1024px), @media (max-width: 800px), dan @media (max-width: 768px), dimana ketika kalian buka gambar tersebut diukuran layar 1024px maka width dari gambar tersebut akan mengecil menjadi 550px, selanjutnya ketika kalian buka image tersebut diukuran layar 800px, maka image tersebut akan mengecil lagi dengan width 500px, dan ketika kalian buka image tersebut diukuran layar 768px maka gambar tersebut akan mengecil dengan width 450px.

Nah begitulah cara membuat sebuah image responsive menggunakan media queries yang ada pada CSS3. Buat kalian yang ingin mendownload script secara keseluruhannya kalian bisa klik tombol download dibawah ini. Sekian dulu tutorial dari saya, semoga tutorial ini bermanfaat untuk kalian semua. Terima Kasih.

Demo | Download