CSS Image Bundle - Untuk Mempercantik Tampilan Gambar

CSS Image Bundle - Kumpulan CSS untuk image ini saya namakan CSS Image Bundle, karena fungsinya untuk mengatur tampilan gambar pada beberapa posisi.

CSS ini selalu ada walaupun saya berganti-ganti template, dan entah berapa tahun sudah. CSS ini saya dapatkan hasil ngobrol dengan Kang Adhy Suryadi, pemilik AdhySuryadi.com dan saya tambahkan CSS Caption, (dulu pemilik Kompi Ajaib, sekarang sudah berganti pemilik).

CSS Image Bundle

/* CSS Image Bundle by Adhy Suryadi */
.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:left;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:right;}
.img-border {border:1px solid #ddd}
.img-200,.img-300,.img-400,.img-500,.img-600{width:100%;text-align:center;clear:both}
.img-200{max-width:200px;}
.img-300{max-width:300px;}
.img-400{max-width:400px;}
.img-500{max-width:500px;}
.img-600{max-width:600px;}
.img-caption{display: block;margin-top: 5px;font-size: small;line-height: 1.3;opacity: .6;font-style:italic}
@media screen and (max-width:640px){
.img-500.img-left,.img-500.img-right,.img-600.img-left,.img-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-200.img-left,.img-200.img-right,.img-300.img-left,.img-300.img-right,.img-400.img-left,.img-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}

Silahkan Perhatikan CSS di atas, ada beberapa pengaturan yang sudah diatur, termasuk responsivitas

img-left

img-left digunakan untuk menyimpan gambar kecil di sebelah kiri teks. img-left harus dipadukan juga dengan ukuran gambar agar ketika tampil di layar yang lebih kecil, ukurannya proporsional. Contoh gambar dibawah adalah 300px, maka padukan dengan img-300. untuk format penulisan:

<div class='img-left img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh (teks saya gunakan Lorem Ipsum)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum augue sit amet velit gravida eleifend. Vivamus vitae urna porttitor, tristique velit vel, tincidunt metus. Sed dignissim nulla a sollicitudin lobortis. Aenean a semper nunc. In porta euismod placerat. Pellentesque sapien sem, interdum eget justo eget, consequat varius nisl. Aenean pellentesque diam a est cursus facilisis. Aliquam mollis lorem nec fringilla faucibus. Nam non aliquam dui. Maecenas vel pharetra lacus, suscipit dignissim metus. Sed erat massa, volutpat in congue eu, tincidunt non quam. Integer ut facilisis nunc. Proin elit diam, interdum eget lorem at, molestie sagittis felis. Nam consequat eros quam.

img-right

img-right digunakan untuk menyimpan gambar kecil di sebelah kanan teks, sama seperti di atas, tambahkan ukuran gambar. untuk format penulisan:

<div class='img-right img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum augue sit amet velit gravida eleifend. Vivamus vitae urna porttitor, tristique velit vel, tincidunt metus. Sed dignissim nulla a sollicitudin lobortis. Aenean a semper nunc. In porta euismod placerat. Pellentesque sapien sem, interdum eget justo eget, consequat varius nisl. Aenean pellentesque diam a est cursus facilisis. Aliquam mollis lorem nec fringilla faucibus. Nam non aliquam dui. Maecenas vel pharetra lacus, suscipit dignissim metus. Sed erat massa, volutpat in congue eu, tincidunt non quam. Integer ut facilisis nunc. Proin elit diam, interdum eget lorem at, molestie sagittis felis. Nam consequat eros quam.

img-center

img-center digunakan untuk menyimpan gambar kecil di tengah-tengah, untuk format penulisan:

<div class='img-center img-500'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

img-border

img-border digunakan apabila ingin menambah border pada image. Apabila pada gambar kecil, jangan lupa tambahkan juga ukuran seperti diatas

<div class='img-center img-500 img-border'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

img-caption

Untuk menambah keterangan gambar (caption), contoh format penulisannya seperti ini:

<div class='img-left img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
	<span class='img-caption'>Keterangan Gambar</span>
</div>

Contoh

Geopark Ciletuh - Sukabumi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum augue sit amet velit gravida eleifend. Vivamus vitae urna porttitor, tristique velit vel, tincidunt metus. Sed dignissim nulla a sollicitudin lobortis. Aenean a semper nunc. In porta euismod placerat. Pellentesque sapien sem, interdum eget justo eget, consequat varius nisl. Aenean pellentesque diam a est cursus facilisis. Aliquam mollis lorem nec fringilla faucibus. Nam non aliquam dui. Maecenas vel pharetra lacus, suscipit dignissim metus. Sed erat massa, volutpat in congue eu, tincidunt non quam. Integer ut facilisis nunc. Proin elit diam, interdum eget lorem at, molestie sagittis felis. Nam consequat eros quam.

Apabila ada tambahan, silahkan share di kolom Komentar.