Gambar dalam sebuah website akan ditampilkan sesuai ukuran asli jika tidak diatur sedemikian rupa. Masalah baru nanti muncul karena perangkat yang mengakses sebuah website berbeda jenis dan ukuran.
Untuk itulah diperlukan pengaturan gambar postingan agar menyesuaikan diri dengan lebar perangkat. Hal inilah yang kemudian dikenal dengan istilah "responsive".
Dan pengaturan ini ada yang secara langsung dan ada pula yang meletakannya bersama kode CSS lain. Seperti yang telah kita coba bersama kemarin tentang cara mengatur gambar responsive. Yaitu dengan menuliskan kode: .post-body img { width: 100%; height: auto }.
Jadi, perintah di atas memaksa browser agar ukuran tinggi gambarnya (height) dilakukan penyesuaian secara auto. Dengan cara ini, gambar yang kita posting semuanya akan terlihat dengan lebar penuh dengan tinggi yang menyesuaikan.
Dan akar masalahnya adalah begini; Pada bagian awal artikel saya upload gambar dengan ukuran pada umumnya gambar judul. Setelah itu, pada bagian akhir saya coba upload 3 gambar kecil yang sejatinya hanyalah serupa dengan icon.
Namun sayangnya, ketiga icon gambar kecil tersebut ketika diposting terlihat dengan lebar penuh dan dengan tinggi yang juga penuh. Sebagaimana terlihat pada screenshoot di atas: Gambar icon terlihat sangat besar menyamai gambar pertama di atas yang terselip dekat dengan judul utama.
Padahal apa yang saya inginkan adalah seperti tampilan screenshot di bawah ini. Bersamaan dengan itu, gambar paling atas yang menempati posisi deket judul tetap dengan ukuran penuh dan tinggi gambar yang fleksibel.
Lalu bagaimana caranya agar gambar di bawahnya tidak ikut-ikutan berubah menjadi penuh? Mari simak bersama pengalaman hari ini berkutat dengan blog.
Cara Mengatur Gambar Postingan Blogger Agar Responsive (Catatan Tambahan)
Tulisan ini pada dasarnya adalah revisi tulisan sebelumnya tentang cara mengatur gambar postingan agar responsive mengikuti lebar perangkat pengunjung.
Namun demikian, artikel sebelumnya juga tidak bisa dikatakan salah 100%. Karena jika penulisan blog hanya mencantumkan gambar dengan ukuran yang serentak. Maka, baris kode pada tulisan sebelumnya tidak perlu dirubah.
Berbeda halnya jika teman-teman menginginkan perubahan sebagaimana yang dimaksud. Untuk itu, bagi yang berminat silahkan ikuti tutorial di bawah ini.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Cari kode di bawah ini
4. Ganti dengan kode berikut:
5. Simpan theme.
6. Link demo bisa klik tautan di bawah ini.
Kesimpulan
Pada baris kode yang tertulis di atas memiliki kode yang hampir sama. Benar, kita hanya menambahkan "max" dan diikuti dengan "-" saja agar nilainya berubah.
Dan properti max-width = 100% artinya gambar dapat diperkecil agar sesuai dengan ruang namun juga memungkinkan untuk tumbuh mencapai batas maksimalnya hingga ukuran asli dari gambar tersebut.
Sedangkan properti sebelumnya memberitahu bahwasannya gambar memungkinkan untuk tumbuh melebihi ukuran asli jika ruang gambar lebih besar dari ukuran gambar. Makanya, tidak heran kan gambar yang dibawahnya padahal kecil-kecil koq berubah ukuran menjadi besar semua.
Sekian artikel kali ini tentang catatan tambahan pada artikel sebelumnya tentang pengaturan gambar postingan agar responsive.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar