Cara Menciptakan Gambar (Images) Responsive Website Html Css Sederhana
Informasi selanjutnya yang akan aku bagikan kali ini masih mengenai design tampilan website. Sebelumnya aku membuatkan wacana cara menciptakan navbar menjadi responsive, kini aku akan mengulas bagaimana cara menciptakan sebuah gambar menjadi responsive ketika dibuka melalu smartphone yang layarnya lebih kecil dibandingkan dekstop. Kita lanjutkan instruksi 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
Kita buat dahulu tag untuk menampilkan gambar
Berikut CSS yang kita butuhkan
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 instruksi css berikut :
Terima Kasih masih setia berkunjung blog gapunyakode, semoga dapat bermanfaat ya Sob.
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 supaya gambarnya tampil dengan sempurna. Selanjutnya kita membutuhkan CSS untuk mengatur tinggi dan lebar gambar tersebut.<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>
Berikut CSS yang kita butuhkan
.image {
width: 1263px;
height: 225px;
}
Ukuran tersebut akan memperlihatkan efek baik pada ketika design website kita buka pada dekstop namun kalau kita dalam versi mobile tampilannya akan ibarat berikut :width: 1263px;
height: 225px;
}
 |
| testing css dekstop gapunyakode |
@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..image {
width: 100%;
}
}
Terima Kasih masih setia berkunjung blog gapunyakode, semoga dapat bermanfaat ya Sob.