[SHARE] Cara Menjaga Aspek Rasio Gambar Pada Desain Web Responsif

Pada artikel ini ane mau sharing cara styling image dengan CSS agar responsif sesuai ukuran container dari image.
Ini sangat berguna khususnya jika agan2 memiliki desain web yang responsif, secara otomatis image dan konten lainnya yang terdapat
dalam web tersebut juga harus responsif dan tidak merusak tampilan web.


Apa yang dimaksud aspek rasio pada sebuah gambar?

Aspek rasio adalah rasio perbandingan lebar (width) dan tinggi (height) dari sebuah gambar, dimana dengan membagikan angka terbesar
yang sama akan didapat nilai terkecil dari hasil pembagian tersebut.

Contoh soal:
Sebuah gambar memiliki lebar: 320px dan tinggi: 180px. Berapakah aspek rasionya?
Dik: lebar = 320px
Tinggi = 180px
Dit: Rasio?
Jawab:
Kedua bilangan sama-sama dibagi dengan angka pembagi terbesar sehingga menghasilkan angka terkecil dari kedua bilangan.
Nilai pembaginya adalah: 20.

Rumusnya:
lebar = 320:20 = 16
tinggi = 180:20 = 9

Jadi:
Aspek rasio dari gambar dengan ukuran 320x180px adalah 16:9.


Apa kegunaan aspek rasio dari sebuah image pada desain web?

Aspek rasio ini sangat berguna khususnya jika agan membuat sebuah web yang responsif.
Yang dimaksud responsif adalah tampilan desain web akan mengikuti ukuran (resolusi) layar dari device yang digunakan
untuk mengakses web tersebut.

Coba agan perhatikan satu set galeri image berikut ini:

Code:

<ul>
    <li><a href="#"><img src="h**p://example.com/320/180/sports" /></a></li>
    <li><a href="#"><img src="h**p://example.com/320/180/city" /></a></li>
    <li><a href="#"><img src="h**p://example.com/352/198/technics" /></a></li>
</ul>

Kita dapat menampilkan galeri image ini menjadi responsive dengan menggunakan CSS seperti berikut (hanya bagian penting yang ditampilkan):

Code:

ul
{
    width: 100%;
    padding: 0;
    margin: 0 0 2em 0;
    list-style-type: none;
}

li
{
    float: left;
    width: 33.3%;
    padding: 0;
    margin: 0;
    background-color: #000;
    border: 10px solid #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

li a
{
    display: block;
    width: 100%;
}

img
{
    display: block;
    max-width: 100%;
}

Tampilan galeri image akan bagus karena semua image tersebut memiliki aspek rasio yang sama yaitu 16:9 aspek rasio.
Persentase ketinggian image adalah persis 56,25% dari lebar (9 dibagi dengan 16 dikali 100% adalah persentase ketinggian image).

Begini penampakannya gan:



Namun, para web designer akan paranoid dengan ukuran image dan aspek rasio yang berbeda-beda. Misalnya:

Code:

<ul>
    <li><a href="#"><img src="h**p://example.com/320/180/sports" /></a></li>
    <li><a href="#"><img src="h**p://example.com/320/320/city" /></a></li>
    <li><a href="#"><img src="h**p://example.com/200/150/technics" /></a></li>
</ul>

Code HTML diatas hasilnya kayak gini gan:



Ada berbagai solusi untuk masalah ini yang bisa aga terapkan:

1. Agan bisa mengubah ukuran setiap gambar secara manual. Tentunya itu memakan waktu dan membosankan.
2. Agan bisa menerapkan solusi mengubah ukuran gambar berbasis server secara otomatis. Itu bisa memakan waktu cukup
   lama dan gambar yang dihasilkan mungkin tidak dipoles atau dioptimalkan seperti yang kita suka.
3. Agan bisa mengamuk dan menolak untuk bekerja dengan kondisi seperti itu. Tentu saja, itu tidak profesional dan
   tidak satupun dari kita akan menggunakan taktik tersebut (terlalu sering).

Atau bisakah menggunakan CSS untuk memecahkan masalah ini?

Tentu saja bisa. Tapi itu tidak 100% seperti yang mungkin agan harapkan. Untuk fixed-width atau
ukuran lebar gambar tertentu, jika misalnya lebarnya 160px, kita bisa saja dengan gampang membuat tingginya 90px
dan pergi lebih awal untuk nongkrong.

Dalam contoh gambar di atas, lebar masing-masing gambar adalah 33,3% dari total lebar container galeri dikurangi 20px
untuk border (pembatas) di tepi sebelah kiri dan kanan. Ini bisa menjadi ukuran tetapi pengaturan ketinggian tetap akan
menghambat aspek rasio yang kita dibutuhkan.


Persentase Padding

Masih mengikuti sampai disini? Oke lanjut, atau gelar tiker dulu juga boleh. Yang mau pesen indomie rebus dulu juga boleh,
saya nitip satu juga kalo boleh, cabe rawitnya 2 aja..

Sebelum makin ngelantur, kita lanjut lagi. Karena ane akan membahas bagian paling menariknya.

Bagi agan yang tahu sedikit tentang CSS, tentu tau apa itu padding. Belum?!
Oke, jadi padding adalah pudding,, eh maksud ane.. adalah jarak lapisan/ruang dari sebuah elemen.
Ini digunakan untuk menambah ruang antara sebuah elemen dengan border (pembatasnya).

Nah, kita bisa menggunakan trik persentase padding ini untuk mengatur tampilan image dengan ukuran yang berbeda-beda.
Dengan menggunakan aspek ratio 16:9 maka dapat kita definisikan:

Code:

#element
{
    position: relative;
    height: 0;
    padding: 56.25% 0 0 0;
}

Elemen ini akan mempertahankan rasio 16:9 berdasarkan lebar blok container (wadah).
Tinggi telah ditetapkan dengan nilai 0px, tapi, karena kita telah menetapkan position: relative;
maka kita benar-benar dapat memposisikan elemen child (anak).

Jadi secara keseluruhan, maka untuk kode html galeri image di atas akan menjadi berikut:

Code:

li a
{
    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding: 56.25% 0 0 0;
    overflow: hidden;
}

img
{
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Hasilnya akan menunjukkan gambar dengan batas hitam jika tidak memiliki pencocokan rasio 16:9 kayak image di bawah:



Kalo agan utak-atik code CSS diatas dengan menghilangkan max-width atau max-height, maka akan memotong (cropping) image daripada mengubah ukuran image itu sendiri.

Selamat mencoba..
Ane harap artikel ini berguna.

 

keyen , ijin bookmark

 

ctrl + D dulu,nice share gan, btw Nilai pembaginya adalah: 20, 20 itu dari mana gan?

 

Btw, apa bedanya ya mas jika saya buat begini?

Code:

img {width:100%;height:auto}

Dengan syarat gambar akan tetep mengikuti lebar dari containernya. Bukankan ini lebih mudah? Atau saya yang salah?

 

Silahkan bang, mumpung masih baru, karena Senin harga naik..

 

20 itu nilai bagi terbesar untuk width dan height image.

Kalo misalnya, pembaginya 10, hasilnya:
lebar = 320:10 = 32
tinggi = 180:10 = 18

Bilangan 32 dan 18 masih bisa dibagi lagi. Misalnya dengan bilangan 2.
lebar = 32:2 = 16
tinggi = 18:2 = 9

Jadi, 10 bukan nilai pembagi terbesar.

Kalo dibagi dengan 20, maka hasil baginya adalah bilangan terkecil yang tidak bisa dibagi lagi dengan bilangan lainnya.

 

Secara sederhana itu bisa, hasilnya seperti image-ratio2.jpg di atas.
Tapi bagaimana jika kita mau tingginya semua image itu sama?

Tekni ini berguna untuk hal tersebut.

 

wah,, lumayan njlimet ini.. fyuhh