Sebagai pengembang web, Anda sering kali mengalami dilema dalam bekerja dengan elemen HTML yang - tidak seperti elemen img, misalnya - tidak memiliki ukuran tetap atau rasio aspek tetap. Seringkali Anda ingin memastikan bahwa objek ini berperilaku responsif, namun proporsi antara lebar dan tinggi tetap dipertahankan. Secara default, CSS tidak menawarkan solusi intuitif di sini. Namun dengan bantuan properti padding vertikal Anda dapat mencapai tujuan Anda.
Mari kita ambil contoh sehari-hari, yaitu gambar produk berbentuk persegi. Meskipun grafiknya sendiri tidak selalu berbentuk persegi, kita ingin menampilkannya dengan rasio aspek 1:1 tanpa usaha atau distorsi tambahan, dan lebarnya (dan karenanya tingginya) harus berubah secara responsif. Kode berikut memudahkan pencapaian hal ini menggunakan CSS tanpa markup tambahan.:
1bc3a80de3db90cdf0535541236d95f2
dengan hasil:
Namun mengapa ini berhasil dan bagaimana rasio aspek lainnya dapat dibuat? Kuncinya terletak pada properti padding, yang - ditentukan dalam nilai persentase - selalu didasarkan pada nilai dasar yang sama dengan properti Lebar (yaitu lebar elemen induk). Hal ini jelas untuk padding-kiri dan padding-kanan, mengejutkan untuk padding-atas dan padding-bawah, namun sangat membantu dalam kasus ini.
Jika Anda menginginkan rasio aspek 16: 9, misalnya, Anda memilih nilai width: 100%; padding-bottom: 56.25%;. Rasio aspek yang memperhitungkan rasio emas adalah lebar: 100%; padding-bottom: 61,81%; bisa diwujudkan.
Dengan bantuan calc Anda dapat langsung menentukan aspek rasio, misalnya untuk 16: 9 dengan padding-bottom: calc (1 / (16/9) * 100%). Jika elemen terdiri dari elemen bertingkat lebih lanjut, elemen turunan diposisikan secara absolut untuk mengimbangi padding elemen induk:
1bc3a80de3db90cdf0535541236d95f2
Ini mengarah pada hasil berikut: