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;}Untuk menggunakannya didalam <body> gunakan skrip html ini
.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;}}
<div class="imgR">Simpel bukan, cukup sekian artikel ini, semoga bermanfaat.
<img src="http://urlgambar">
</div>
NB: Skrip diatas sangat berguna bagi kamu yang ingin menggunakannya sebagai banner iklan statis di website atau blog kamu.
sumber
Komentar