✔ Cara Menciptakan Gambar (Images) Responsive Website Html Css Sederhana

Informasi selanjutnya yang akan aku bagikan kali ini masih mengenai design tampilan website. Sebelumnya aku mengembangkan perihal cara menciptakan navbar menjadi responsive, kini aku akan mengulas bagaimana cara menciptakan sebuah gambar menjadi responsive dikala dibuka melalu smartphone yang layarnya lebih kecil dibandingkan dekstop. Kita lanjutkan arahan dari navbar resposive tadi ya Sob. Jika belum punya dapat kunjungi artikel sebelumnya dibawah ini

Baca Juga : Cara Membuat Navbar Responsive Website HTML CSS Sederhana

images responsive gapunyakode

Kita buat dahulu tag untuk menampilkan gambar

<div class="image">
  <a href="https://www.gapunyakode.blogspot.com">
    <img src="url/works.jpeg" alt="Informasi selanjutnya yang akan aku bagikan kali ini masih mengenai design tampilan websi ✔ Cara Membuat Gambar (Images) Responsive Website HTML CSS Sederhana" >
  </a>
</div>

Isikan url gambar yang teman - teman akan tampilkan pada tag <img> dan pastikan urlnya benar biar 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 memperlihatkan efek baik pada dikala design website kita buka pada dekstop namun kalau kita dalam versi mobile tampilannya akan ibarat berikut :

testing css dekstop gapunyakode

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 ialah sebuah kerangka untuk gambar kita. Selanjutnya kita tambahkan arahan 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, ibarat gambar paling atas sendiri tampilan gambarnya tidak melebar ke kanan tapi telah sesuai dengan layar.

Terima Kasih masih setia berkunjung blog gapunyakode, semoga dapat bermanfaat ya Sob.
Sumber http://gapunyakode.blogspot.com

Berlangganan Informasi Terbaru: