Cara Membuat Gambar jadi Responsive dengan Script HTML

Cara Membuat Gambar jadi Responsive dengan Script HTML


Fitur responsive untuk sebuah web atau blog kini menjadi sebuah keharusan, karena dengannya website atau blog dapat diakses dengan mudah melalui berbagai macam gadget, mulai dari komputer hingga handphone.

Berikut ini saya akan berbagi tips, bagaimana caranya agar gambar yang ada di website menjadi responsive ketika diakses melalui gadget dengan layar kecil.

Tambahkan skrip HTML berikut di css website atau blog kamu sebelum </head> :

.imgR {width: 90%;margin: auto;}
.imgR img{width: 90%;}
@media (max-width: 1024px)
{.imgR img {width: 840px;}}
@media (max-width: 800px)
{.imgR img {width: 720px;}}
@media (max-width: 768px)
{.imgR img {width: 640px;}}
@media (max-width: 680px)
{.imgR img {width: 520px;}}
@media (max-width: 480px)
{.imgR img {width: 360px;}}
@media (max-width: 368px)
{.imgR img {width: 240px;}}
@media (max-width: 248px)
{.imgR img {width: 180px;}}
Untuk menggunakannya didalam <body> gunakan skrip html ini

<div class="imgR">
        <img src="http://urlgambar">
</div>
Simpel bukan, cukup sekian artikel ini, semoga bermanfaat.

NB: Skrip diatas sangat berguna bagi kamu yang ingin menggunakannya sebagai banner iklan statis di website atau blog kamu.

sumber

Bagikan Artikel ini ke:

Baca ini Juga:

Komentar Disqus