Kiel retejo-programisto, vi ofte trovas vin en la dilemo labori kun HTML-elementoj kiuj - male al la img-elemento, ekzemple - havas nek fiksan grandecon nek fiksan bildformaton. Ofte vi volas certigi, ke ĉi tiuj objektoj kondutas responde, sed la proporcio inter larĝo kaj alto estas konservita. Defaŭlte, CSS ne ofertas intuician solvon ĉi tie. Sed helpe de la vertikala remburaĵo vi povas atingi vian celon.
Ni prenu la ĉiutagan ekzemplon de kvadrataj produktaj bildoj. Kvankam la grafikaĵoj mem ne nepre estas kvadrataj, ni ŝatus montri ilin kun bildformato 1:1 sen ia ajn ekstra peno aŭ distordo, kaj ilia larĝo (kaj tial alto) devus ŝanĝiĝi respondeme. La jena kodo faciligas atingi tion per CSS sen ia ajn aldona etikedado.:
1bc3a80de3db90cdf0535541236d95f2
kun la rezulto:
Sed kial ĉi tio funkcias kaj kiel oni povas krei aliajn bildformajn proporciojn? La ŝlosilo al ĉi tio kuŝas en la kompletigo, kiu - specifita en procentaj valoroj - ĉiam baziĝas sur la sama baza valoro kiel la posedaĵo Larĝo (nome la larĝo de la gepatra elemento). Ĉi tio estas evidenta por padding-maldekstra kaj padding-dekstra, surpriza por padding-supra kaj padding-fundo, sed tre helpema en ĉi tiu kazo.
Ekzemple, se vi volas bildformon de 16: 9, vi elektas la valorojn larĝo: 100%; rembura fundo: 56,25%;. Bildformato, kiu konsideras la oran rilaton, estas larĝo: 100%; rembura fundo: 61,81%; realigebla.
Kun la helpo de calc vi povas rekte specifi la bildformaton, ekzemple por 16: 9 kun rembura fundo: calc (1 / (16/9) * 100%). Se la elemento konsistas el pluaj nestitaj elementoj, la infana elemento estas absolute poziciigita por kompensi la kompletigon de la gepatra elemento:
1bc3a80de3db90cdf0535541236d95f2
Ĉi tio kondukas al la sekva rezulto: