Kiel reteja programisto, oni ofte embarasas sin labori kun HTML-elementoj, kiuj per si mem - kontraste al la img-elemento, ekzemple - havas nek fiksan grandecon nek fiksan bildformon. Ofte vi volas atingi, ke ĉi tiuj objektoj kondutas respondeme, sed la proporcio inter larĝo kaj alto estas konservata. CSS ne ofertas intuician solvon ĉi tie defaŭlte. Sed helpe de la vertikala remburaĵo vi povas atingi vian celon.
Ni prenu la ĉiutagan ekzemplon de kvadrataj artikolaj bildoj, kies grafikaĵoj ne nepre estas kvadrataj, sed ni ŝatus montri ilin kun la bildformato 1: 1 sen plia peno kaj ĉefe sen distordo, per kio ilia larĝo (kaj tiel ankaŭ alto) ŝanĝiĝas respondeme devus. Kun la sekva kodo estas tre facile fari tion sen aldona markado helpe de CSS:
1bc3a80de3db90cdf0535541236d95f2
kun la rezulto
Sed kial ĝi funkcias kaj kiel oni povas krei aliajn bildformojn? La ŝlosilo al ĉi tio kuŝas en la rembura posedaĵo, kiu - donita en procentaj valoroj - ĉiam baziĝas sur la sama baza valoro kiel la larĝa eco (nome la larĝo de la gepatra elemento). Kun remburaĵo-maldekstra kaj remburaĵo-dekstra tio estas evidenta, kun rembura supro kaj rembura fundo surpriza, sed tre helpema ĉi-kaze.
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: