Cara Menciptakan Gambar (Images) Responsive Website Html Css Sederhana

⇉ Download Cara Menciptakan Gambar (Images) Responsive Website Html Css Sederhana Now! ⇇

Informasi selanjutnya yang akan aku bagikan kali ini masih mengenai design tampilan website. Sebelumnya aku mengembangkan wacana 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 aba-aba 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 sobat - sobat 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 menawarkan efek baik pada dikala design website kita buka pada dekstop namun kalau kita dalam versi mobile tampilannya akan menyerupai 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 yaitu sebuah kerangka untuk gambar kita. Selanjutnya kita tambahkan aba-aba 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, menyerupai 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.

≫Download Cara Menciptakan Gambar (Images) Responsive Website Html Css Sederhana≪

Bagikan Artikel ini