Sebagai pembangun web, anda sering mendapati diri anda dalam dilema bekerja dengan elemen HTML yang - tidak seperti elemen img, contohnya - tidak mempunyai saiz tetap mahupun nisbah aspek tetap. Selalunya anda ingin memastikan bahawa objek ini berkelakuan responsif, tetapi perkadaran antara lebar dan ketinggian dikekalkan. Secara lalai, CSS tidak menawarkan penyelesaian intuitif di sini. Tetapi dengan bantuan harta pelapik menegak anda boleh mencapai matlamat anda.
Mari kita ambil contoh setiap hari bagi imej artikel segi empat sama, yang grafiknya tidak semestinya segi empat sama, tetapi yang ingin kami paparkan dengan nisbah aspek 1:1 tanpa usaha tambahan dan, terutama sekali, tanpa herotan, yang mana lebarnya (dan dengan itu juga ketinggian) harus berubah secara responsif. Dengan kod berikut adalah sangat mudah untuk melakukan ini menggunakan CSS tanpa sebarang markup tambahan:
1bc3a80de3db90cdf0535541236d95f2
dengan hasilnya:
Tetapi mengapa ini berfungsi dan bagaimanakah nisbah aspek lain boleh dibuat? Kunci kepada ini terletak pada sifat padding, yang - dinyatakan dalam nilai peratusan - sentiasa berdasarkan nilai asas yang sama dengan sifat Width (iaitu lebar elemen induk). Ini jelas untuk padding-left dan padding-right, mengejutkan untuk padding-top dan padding-bottom, tetapi sangat membantu dalam kes ini.
Sebagai contoh, jika anda mahukan nisbah aspek 16: 9, anda memilih nilai lebar: 100%; padding-bottom: 56.25% ;. Nisbah aspek yang mengambil kira nisbah emas adalah lebar: 100%; bahagian bawah: 61.81%; dapat direalisasikan.
Dengan bantuan calc, anda dapat secara langsung menentukan nisbah aspek, misalnya untuk 16: 9 dengan padding-bottom: calc (1 / (16/9) * 100%). Sekiranya elemen tersebut terdiri daripada elemen bersarang lebih jauh, elemen anak diposisikan secara mutlak untuk mengimbangi pelapisan elemen induk:
1bc3a80de3db90cdf0535541236d95f2
Ini membawa kepada hasil berikut: