Mengatur Tata Letak Gambar dengan CSS

Tutorial - 01 Nov 2013

Umumnya ketika sebuah gambar di tampilkan dihalaman web, terdapat 3 posisi yang sering digunakan yaitu meletakkan gambar ke sisi kiri, tengah ataupun kanan. Untuk mengatur tata letak gambar lebih mudah, gunakan perintah CSS berikut.

Mengatur Letak Gambar Ke Sisi Kiri

Mengatur Tata Letak Gambar Lebih Mudah dengan CSS

Untuk meletakkan gambar ke sisi kiri berikut perintah yang dapat Anda gunakan.

Baca juga :
Membuat Menu Responsive dengan HTML dan CSS
Membuat Efek Hover Menarik dengan hover.css
9 CSS Framework untuk Membangun Front End

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

Mengatur Tata Letak Gambar Lebih Mudah dengan CSS

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

Mengatur Tata Letak Gambar Lebih Mudah dengan CSS

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.


Baca Juga :
Perbedaan Desain Web Static, Liquid, Adaptive dan Responsive
Membuat Web Responsive dengan CSS3

Manfaat lainnya, pengunjung website Anda pun akan nyaman ketika melihat gambar yang Anda sajikan. Untuk membuat gambar responsive sangatlah mudah, ikuti langkah berikut.

Sisipkan gambar menggunakan tag HTML, dan tambahkan class .img-responsive pada gambar tersebut.

<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 ?!


Mengatur Tata Letak Gambar dengan CSS

Anda juga dapat menggunakan perintah CSS lainnya untuk membuat gambar responsive. Yaitu :

.img-responsive {
    width: 100%;
    height: auto;
}

Kesimpulan

Untuk mengatur tata letak gambar dengan CSS sangatlah mudah. Anda hanya perlu menuliskan beberapa baris perintah CSS sehingga gambar yang Anda sajikan pun tampil dengan lebih baik. Silakan gunakan printah diatas untuk mengatur tata letak gambar menjadi ke sisi kiri, tengan ataupun kanan.

Juga bila desain website Anda sudah responsive, tampilkan gambar menjadi responsive agar terlihat lebih baik dan nyaman. Selamat mencoba dan Semoga bermanfaat. Bila ada pertanyaan silakan berikan komentar Anda.