Minangka pangembang web, sampeyan kerep nemokake dhewe ing dilema nggarap unsur HTML sing - ora kaya unsur img, contone - ora duwe ukuran tetep utawa rasio aspek tetep. Asring sampeyan pengin mesthekake yen obyek iki tumindak responsif, nanging proporsi antarane jembaré lan dhuwur maintained. Kanthi gawan, CSS ora menehi solusi intuisi ing kene. Nanging kanthi bantuan properti bantalan vertikal sampeyan bisa entuk gol.
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 iki bisa digunakake lan kepiye rasio aspek liyane bisa digawe? Tombol iki dumunung ing properti padding, sing - ditemtokake ing nilai persentase - tansah adhedhasar nilai dhasar sing padha karo properti Width (yaiku jembaré unsur induk). Iki ketok kanggo padding-kiwa lan padding-tengen, kaget kanggo padding-top lan padding-bottom, nanging banget mbiyantu 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: