Minangka pangembang web, sampeyan kerep nggarap elemen HTML sing, ora kaya elemen `img`, ora duwe ukuran utawa rasio aspek sing tetep. Asring, sampeyan pengin obyek kasebut tumindak kanthi responsif nalika njaga proporsi antarane jembar lan dhuwur. CSS ora nawakake solusi intuitif kanthi standar. Nanging, properti padding vertikal bisa nggayuh iki.
Ayo padha njupuk conto saben dina saka gambar produk kothak. Sanajan grafis kasebut dhewe ora mesthi kothak, kita pengin nampilake kanthi rasio aspek 1:1 tanpa gaweyan utawa distorsi ekstra, lan jembaré (lan mulane dhuwuré) kudu owah kanthi responsif. Kode ing ngisor iki nggampangake kanggo entuk iki nggunakake CSS tanpa markup tambahan.:
1bc3a80de3db90cdf0535541236d95f2
karo asile
Nanging kenapa kerjane lan kepiye cara nggawe rasio aspek liyane? Kunci iki kalebu ing properti padding, sing - diwenehi angka persentase - mesthi adhedhasar nilai dhasar sing padha karo properti Jembar (yaiku jembaré elemen induk). Kanthi bantalan-kiwa lan bantalan-tengen, mesthine jelas, kanthi bantalan ndhuwur lan bantalan-ngisor ngagetne, nanging migunani banget ing kasus iki.
Contone, yen sampeyan pengin rasio aspek 16: 9, sampeyan milih jembaré regane: 100%; ngisor bantalan: 56,25%;. Rasio aspek sing ngetrapake rasio emas yaiku jembar: 100%; ngisor bantalan: 61,81%; bisa kawujud
Kanthi bantuan kal, sampeyan bisa langsung milih rasio aspek, contone kanggo 16: 9 kanthi bantalan ngisor: kals (1 / (16/9) * 100%). Yen elemen kasebut kalebu elemen sing luwih apik, susuh, elemen bocah diposisikan pancen kanggo menehi ganti rugi kanggo unsur elemen induk:
1bc3a80de3db90cdf0535541236d95f2
Iki nyebabake asil ing ngisor iki: