Cara mengatasi image yang terlalu lebar agar otomatis menyesuaikan layar

Cara mengatasi image yang terlalu lebar agar otomatis menyesuaikan layar
Cara mengatasi image yang terlalu lebar agar otomatis menyesuaikan layar.

Kadang Kadang kita mengunjungi suatu blog yang tampilan gambarnya terlalu lebar kan??
Mungkin admin blog tersebut tidak tau cara mengatur css agar gambarnya responsive.

Kalau gambarnya kelebaran kan keliatan jelek di mata visitor, bisa2 belum baca udah kabur dulu tuh visitor karena liat gambarnya yang acak2an.

Nah atas dasar itu saya akan share Cara mengatasi image yang terlalu lebar agar otomatis menyesuaikan layar..

Sebenernya cara ini cukup mudah, hanya menambah beberapa value saja.

Oke kita mulai pengenalan image dulu yah.

Apa itu image pada halaman web??

Image adalah gambar di sebuah halaman web, agar artikel di web tersebut bisa dipahami oleh visitor.


Kurang lebih artinya begitu lah, itu menurut pandangan saya.

Sudah tau kan, apa itu itu image, oke kita lanjut.

Biasanya kita menemukan kode html image seperti ini:


<img src="
https://4.bp.blogspot.com/-LzywQnnPCcc/WKx8Q24cFEI/AAAAAAAAApw/efrb7GvCqO0cdE-q9Y8erHoE0Bm0qSP6wCPcB/s1600/Most-Beautiful-Japanese-Women.jpg" width="600" height="400"/>


Kita lihat kode yang bercetak tebal, disitu kita melihat kode gini:

width="600" height="400"

Kalau blog kita memakai kode seperti itu , maka ketika halaman di buka lewat browser mobile atau hape, gambarnya pasti kedegean.

Kenapa bisa begitu mas??

Simple. Karena image sudah di atur lebar dan tingginya.

Jadi gak pandang mau yang buka hape atau dekstop ya segitu aja ukurannya.

Trus gimana cara mengatasinya mas??

Gampang. kita pake css saja.

Kita buat dulu kode htmlnya:


<img src="
https://4.bp.blogspot.com/-LzywQnnPCcc/WKx8Q24cFEI/AAAAAAAAApw/efrb7GvCqO0cdE-q9Y8erHoE0Bm0qSP6wCPcB/s1600/Most-Beautiful-Japanese-Women.jpg" class="gambarku" />


Kok gak di atur lebar tingginya??

Tidak!! karena kita akan mengaturnya lewat css.

Dan langkah selanjutnya kita edit cssnya, Bagi yang belum tau cara edit css bisa ikuti tutorial Belajar cara memasukan css ke dalam halaman web.

Bagi yang sudah tau, kita lanjut edit css dengan kode sperti ini:


.gambarku{
max-width:100%;
max-height:100%;
width:100%;
height:auto;
}


Opsional nih sob, misalkan kita malas edit css, kita bisa langsung atur di kode htmlnya.


<img src="
https://4.bp.blogspot.com/-LzywQnnPCcc/WKx8Q24cFEI/AAAAAAAAApw/efrb7GvCqO0cdE-q9Y8erHoE0Bm0qSP6wCPcB/s1600/Most-Beautiful-Japanese-Women.jpg" style="max-width:100%;max-height:100%;width:100%;height:auto;
" />


Tinggal pilih mana yang paling sobat suka.

Gampang kan sob, gampang lah orang beberapa kode saja kok.

Dan hasil kode css di atas akan seperti ini:



Selamat gambar sobat sudah otomatis menyesuaikan layar, bisa juga saya sebut responsive.

Semoga membantu, kalau ada pertanyaan boleh tanya di komentar. Terimakasih.

No comments:

Post a Comment

Tambahkan Komentar