Menambahkan Gambar Pada HTML dengan efek dari fungsi CSS dengan Mudah

Menambahkan gambar pada html adalah salah satu cara untuk mempercantik sebuah tampilan sebuah website. Cara menambahkan gambar pada html tidaklah terlalu sulit untuk kita sob, karena ketika kita sudah mengetahui kode tag html yang akan digunakan maka selesai sudah, gambar akan tampil ke website teman - teman.

Namun jika kita hanya menuliskan tag html saja tentu hasilnya tidak akan memuaskan karena gambar yang kita tampilkan akan sesuai ukuran aslinya, masa setiap kita mau ubah ukuran gambar kita edit dan resize ukuran gambar, maka dari itu kita memerlukan css untuk mempercantik tampilan gambar tersebut.

<!--kode gambar pada html -->
<img src="link url gambar" alt=" " >

untuk mengatur lebar dan tinggi maka kita dapat menambahkan kode css di bawah ini

img {
    width: 100%;
    height: 250px;
}

width 100%, kenapa saya tidak menuliskan dengan px. karena saya ingin menampilkan gambar di website dengan ukuran maksimal lebar yang tersedia, teman - teman juga dapat mengubahnya dengan skala 0 - 100% sesuai dengan kebutuhan teman - teman.

Jika ingin memberikan efek melengkung pada gambar teman - teman dapat menambahkan kode di bawah ini

img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
}

Kita juga dapat menambahkan link pada gambar tersebut. Berikut kode untuk menambahkan link pada gambar html

<!--kode gambar pada html -->
<a href="https://www.androitechnoku.blogspot.com">
<img src="url gambar" alt=" " >
</a>

kita masukan fungsi img kedalam fungs <a href>, teman - teman tinggal menuliskan link apa yang akan dituju ketika gambar yang kita tampilkan tersebut diklik.

Demikian ulasan saya mengenai bagaimana menambahkan gambar pada html dengan efek fungsi css. Semoga dapa bermanfaat untuk teman - teman. Terima Kasih

Share this post