Cara Membuat Gambar (Images) Responsive Website HTML CSS Sederhana

Informasi selanjutnya yang akan saya bagikan kali ini masih mengenai design tampilan website. Sebelumnya saya berbagi tentang cara membuat navbar menjadi responsive, sekarang saya akan mengulas bagaimana cara membuat sebuah gambar menjadi responsive saat dibuka melalu smartphone yang layarnya lebih kecil dibandingkan dekstop. 

Kita lanjutkan kode dari navbar resposive tadi ya Sob. Jika belum punya bisa kunjungi artikel sebelumnya dibawah ini

Kita buat dahulu tag untuk menampilkan gambar

<div class="image">
  <a href="https://www.androitechnoku.blogspot.com">
    <img src="url/works.jpeg" alt=" " >
  </a>
</div>

Isikan url gambar yang teman - teman akan tampilkan pada tag <img> dan pastikan urlnya benar agar gambarnya tampil dengan sempurna. Selanjutnya kita membutuhkan CSS untuk mengatur tinggi dan lebar gambar tersebut.

Berikut CSS yang kita butuhkan

.image {
    width: 1263px;
    height: 225px;
}

Ukuran tersebut akan memberikan efek baik pada saat design website kita buka pada dekstop namun jika kita dalam versi mobile tampilannya akan seperti berikut :

testing css dekstop

Seperti yang kita lihat bersama tampilan gambarnya akan melebar ke kanan sesuai ukuran css awal yaitu 1263px. Ok kita ga perlu merubah ukuran width pada css tersebut, kita anggap saja itu adalah sebuah kerangka untuk gambar kita. Selanjutnya kita tambahkan kode css berikut :

@media screen and (max-width:640px) {
.image {
    width: 100%;
  }
}

Jika dalam penulisan kita benar sudah dipastikan gambarnya akan sesuai dengan lebar layar smartphone yang kita gunakan untuk membuka design website tersebut, seperti gambar paling atas sendiri tampilan gambarnya tidak melebar ke kanan tapi telah sesuai dengan layar.

Terima Kasih masih setia berkunjung blog, semoga bisa bermanfaat ya Sob.

Share this post