Umumnya ketika sebuah gambar di tampilkan dihalaman website, terdapat 3 posisi yang sering digunakan yaitu meletakkan gambar ke sisi kiri, tengah ataupun kanan. Posisi ini juga sering disebut dengan mengatur posisi atau tata letak gambar secara horizontal.
Untuk mengatur tata letak gambar agar sesuai dengan posisi yang di inginkan secara lebih mudah, Anda dapat menggunakan perintah CSS. Pada tutorial ini kita akan belajar cara mengatur tata letak gambar secara horizontal (sisi kanan, tengah dan sisi kiri). Simak tutorial berikut ini :
Mengatur Letak Gambar Ke Sisi Kiri
Untuk meletakkan gambar ke sisi kiri berikut perintah yang dapat Anda gunakan.
Menyisipkan Gambar dengan HTML
<img class="kiri" src="gambar.jpg" />
Mengatur Letak Gambar ke kiri dengan CSS
img.kiri {
float: left;
margin: 5px;
}
Mengatur Letak Gambar Ke Tengah
Ingin menampilkan gambar di posisi tengah ? Gunakan perintah berikut :
Menyisipkan Gambar dengan HTML
<img class="tengah" src="gambar.jpg" />
Mengatur Letak Gambar ke tengah dengan CSS
img.tengah {
display: block;
margin-left: auto;
margin-right: auto;
}
Mengatur Letak Gambar Ke Sisi Kanan
Atau Anda ingin mengatur letak gambar disisi kanan ? Berikut perintahnya.
Menyisipkan Gambar dengan HTML
<img class="kanan" src="gambar.jpg" />
Mengatur Letak Gambar ke kanan dengan CSS
img.kanan {
float: right;
margin: 5px;
}
Membuat Gambar Responsive
Pernahkan Anda melihat gambar di sebuah website yang ukurannya dapat berubah di berbagai perangkat atau device dengan sendirinya ?! Ini disebut dengan responsive. Dengan membuat gambar responsive, secara otomatis ukuran gambar tersebut akan menyesuaikan dengan perangkat tanpa merusak gambar tersebut.
Manfaat lainnya, pengunjung website Anda pun akan nyaman ketika melihat gambar yang Anda sajikan. Untuk membuat gambar responsive sangatlah mudah, ikuti langkah berikut.
Pertama, sisipkan gambar menggunakan tag <img> HTML, dan tambahkan class .img-responsive pada gambar tersebut. Seperti contoh kode berikut :
<img class="img-responsive" src="gambar.jpg" />
Kemudian tuliskan perintah CSS berikut pada .img-responsive untuk membuat gambar responsive.
.img-responsive {
max-width: 100%;
display:block;
height: auto;
}
Untuk melihat hasil gambar responsive silakan lihat gambar dibawah ini. Kemudian coba perbesar/perkecil ukuran web browser Anda atau silakan buka halaman ini di tablet atau smartphone Anda, apakah gambar dibawah sudah responsive ?!
Anda juga dapat menggunakan perintah CSS lainnya untuk membuat gambar responsive. Yaitu :
.img-responsive {
width: 100%;
height: auto;
}
Perhatikan perintah CSS diatas, untuk membuat gambar responsive hanya dibutuhkan 2 perintah CSS yaitu perintah width dan height.
Pada perintah width, kita mengatur ukuran lebar gambar menjadi 100%. Dengan ini, gambar secara otomatis akan disesuaikan menjadi 100% sesuai ukuran layar monitor user. Begitu juga perintah height, ukuran tinggi gambar diatur menjadi auto.
Baca Juga :
– Membuat Menu Responsive Dengan Bootstrap
– Membuat Gambar Background Full Screen Dengan CSS
– Membuat Background Video Pada Website Dengan CSS
– Cara Menggunakan Font Awesome
Kesimpulan
Untuk mengatur tata letak gambar secara horizontal dengan CSS sangatlah mudah. Anda hanya perlu menuliskan beberapa baris perintah CSS sehingga gambar yang Anda sajikan pun tampil dengan lebih baik. Silakan gunakan perintah diatas untuk mengatur tata letak gambar menjadi ke sisi kiri, tengah ataupun ke sisi kanan.
Update. Untuk mengatur tata letak gambar secara vertikal silakan baca tutorialnya disini.
Apabila desain website Anda sudah responsive, tampilkan gambar menjadi responsive agar terlihat lebih baik di perangkat mobile dan membuat nyaman pengunjung website saat melihat gambar. Selamat mencoba dan Semoga bermanfaat. Bila ada pertanyaan silakan berikan komentar Anda.
