Hey Gwener's, What's Up!
Mengatur ukuran gambar tentu sangat penting pada suatu blog atau pun website. Tidak hanya untuk design responsive saja loh, blog dengan template standar pun sebenarnya perlu memperhatikan hal ini. Jangan sampai ukuran gambar justru dapat merusak penampilan suatu blog. Misalnya ukuran gambar yang terlalu besar atau pun terlalu kecil. Tentunya ini akan menggangu pembaca untuk melihat artikel.

Agar permasalahan ini bisa diatasi seorang blogger harus memahami dulu konsep dari HTML terutama untuk tag img untuk gambar ini. Selain itu juga mengusai design CSS pada suatu HTML. Namun untuk sobat yang masih baru, tidak perlu muluk saya akan coba menyajikannya dalam bentuk yang sederhana dan mudah dipahami.

Ukuran untuk design responsive

Nah, perhatikan gambar diatas. Ukuran layar juga mempengaruhi ukuran tampilan blog dan juga tentu akan mempengaruhi ukuran gambar yang ada didalam artikel tersebut. Agar ukuran ini dapat terus disesuaikan makan untuk style lebar harus menggunakan persentase. Sehingga secara otomatis ukuran gambar akan menyesuaikan lebar dari layar atau lebar dari ukuran blog tersebut.

Caranya pun sederhana, sobat dapat menempatkan code width:100% pada attribute style setiap image yang ada pada suatu artikel atau halam suatu blog. Ukuran 100% menandakan lebar yang akan menyesuaikan secara otomatis sesuai ukuran blog yang digunakan atau parrent dari image tersebut.

Lengakapnya adalah seperti berikut <img style="width:100%" /> ini akan membuat lebar dapat menyesuaikan dengan sendiri. Agar lebih terstruktur lagi kita juga bisa menggunakan CSS melalui className. Untuk sobat yang sudah mengerti tentu bukan hal yang sulit menerapkannya. Jadi, untuk sementar silahkan terapkan terlebih dahulu cara diatas dan lihat hasilnya. Ukuran gambar akan sesuai dengan ukuran lebar artikel

Untuk membatasi maksimum lebar yang dibolehkan untuk sebuah gambar sobat bisa menambahkan style="width:100%;max-width:500px" atau diganti dengan ukuran yang sesuai kebutuhan. Sehingga gambar juga tidak terlalu besar ataupun kecil. Selanjutnya baca juga Cara menampilkan gambar dengan div menggunakan javascript