Cara membuat Gambar Responsive menggunakan CSS3

Ya kali inisaya akan berbagi sedikit pengetahuan gimana sih caranya membuat gambar/image jadi responsive compatibvle dengan berbagai width resolusi. yang langsung saja sebenarnya sanagat mudah berikut hasil dan contohnya.:


Dari gambar diatas bisa dilihat bahwa yang satu untuk ukuran pc dan yang satu responsive ukuran hp/smartphone  langsung saja ini kode dan penjelasannya:




<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

script style yaitu yang beguna untuk membuat gambar jadi responsibe dan dapat menyesuaikan layar resolusi yang ada.

"img_chania.jpg" ADALAH url dari gambar.


sekian tutorial dari saya semoga bisa bermanfaat.



Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...