Minangka pangembang web, wong asring isin bisa nggarap elemen HTML sing dhewe - beda karo elemen img, kayata - ora duwe ukuran tetep utawa rasio aspek tetep. Asring sampeyan kepengin ngerti manawa obyek kasebut tumindak responsif, nanging proporsi antarane jembar lan dhuwur dijaga. CSS ora nawakake solusi intuisi ing kene minangka standar. Nanging kanthi bantuan properti padding vertikal sampeyan bisa entuk target.
Ayo padha njupuk conto saben dina gambar artikel alun-alun, grafis sing ora prelu persegi, nanging kita pengin nampilake kanthi rasio aspek 1: 1 tanpa gaweyan tambahan lan sing paling penting tanpa distorsi, sing jembaré (lan kanthi mangkono uga dhuwur) ganti responsif kudune. Kanthi kode ing ngisor iki, gampang banget ditindakake tanpa markup tambahan kanthi pitulung CSS:
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: