Tapi bagaimana kalau kita ingin hasil yang responsif/ responsive design? Jadi berapa pun lebarnya, kita tak perlu mendeklarasikannya, tingginya bisa kita atur, dan, kita cuma perlu CSS, bisakah?
Yup, bisa. Bahkan kita bisa mengatur berapa prosentase tinggi dari lebarnya. Kali ini saya akan membahas hal tersebut.
Kita mulai dengan contoh sederhana.
As you can see, the box is as high as wide. Jika Anda lihat CSSnya, tidak ada deklarasi height dalam px, em, vh, atau satuan lain.
Triknya adalah menggunakan pseudo element atau sebuah block element didalam wadahnya, kemudian berikan padding-top atau padding-bottom dalam prosentase.
Triknya adalah:
Gunakan block element dengan nilai padding-top dalam prosentase
Anda dapat mencoba mengganti width-nya, bahkan dihapus pun tak masalah, berarti lebarnya akan jadi sesuai containernya (karena display:block;) dan tingginya akan tetap menyesuaikan dengan lebarnya.
Lebarnya bisa diganti dengan prosentase juga, tak masalah.
Anda juga dapat mengganti prosentase paddingnya, misal 50% berarti tingginya setengah dari lebar, 200% berarti tingginya dua kali lebar dan sebagainya.
Contoh lagi.
Q: Apakah harus memakai pseudo element? Bagaimana kalau paddingnya langsung di perseginya atau dalam .box nya?
A: Tidak harus dengan pseudo element, bisa dengan div atau span atau[pun elemen lain. Kalau paddingnya diletakkan dalam perseginya langsung, misal kita beri padding 100%, tingginya akan sesuai dengan lebar containernya.
Conclusion
Cara ini sangat mudah, dan juga indah (kata Marc). Trik ini jelas sangat berguna dalam banyak kasus.
