Sebagai pengembang web, orang sering merasa malu untuk bekerja dengan elemen HTML yang sendiri - berbeda dengan elemen img, misalnya - tidak memiliki ukuran tetap atau rasio aspek tetap. Seringkali Anda ingin mencapai objek-objek ini berperilaku responsif, tetapi proporsi antara lebar dan tinggi dipertahankan. CSS tidak menawarkan solusi intuitif di sini secara default. Tetapi dengan bantuan properti bantalan vertikal Anda dapat mencapai tujuan Anda.
Mari kita ambil contoh sehari-hari gambar artikel persegi, yang grafiknya belum tentu persegi, tetapi kami ingin menampilkannya tanpa upaya tambahan dan yang terpenting tanpa distorsi dengan rasio aspek 1: 1, di mana lebar (dan juga tingginya) berubah secara responsif Sebaiknya. Dengan kode berikut, sangat mudah untuk melakukan ini tanpa markup tambahan dengan bantuan CSS:
1bc3a80de3db90cdf0535541236d95f2
dengan hasil
Tapi mengapa ini berhasil dan bagaimana rasio aspek lainnya dibuat? Kuncinya terletak pada properti padding, yang - diberikan dalam nilai persentase - selalu didasarkan pada nilai dasar yang sama dengan properti Width (yaitu lebar elemen induk). Dengan padding-left dan padding-right, hal ini jelas, dengan padding-top dan padding-bottom mengejutkan, tetapi sangat membantu dalam hal 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: