Веб-иштеп чыгуучу катары сиз көп учурда HTML элементтери менен иштөө дилеммасына туш болосуз, мисалы, img элементинен айырмаланып, белгиленген өлчөмдөрү да, пропорциялары да туруктуу эмес. Көбүнчө сиз бул объекттердин жооп кайтарышын камсыз кылууну каалайсыз, бирок туурасы менен бийиктигинин ортосундагы пропорция сакталат. Демейки боюнча, CSS бул жерде интуитивдик чечимди сунуш кылбайт. Бирок вертикалдык толтуруучу касиеттин жардамы менен сиз максатыңызга жете аласыз.
Келгиле, күнүмдүк мисал катары төрт бурчтуу продукт сүрөттөрүн алалы. Графиканын өзү сөзсүз түрдө төрт бурчтуу болбосо да, биз аларды кошумча күч-аракет жумшабай же бурмалабай 1:1 пропорциясында көрсөткүбүз келет, жана алардын туурасы (жана ошондуктан бийиктиги) жооп катары өзгөрүшү керек. Төмөнкү код муну кошумча белгилөөсүз CSSти колдонуу менен оңой ишке ашырууга мүмкүндүк берет.:
1bc3a80de3db90cdf0535541236d95f2
натыйжасы менен:
Бирок бул эмне үчүн иштейт жана башка аспектилердин катышын кантип түзүүгө болот? Мунун ачкычы толтуруучу касиетте жатат, ал пайыздык маанилерде көрсөтүлгөн - ар дайым Width касиети сыяктуу негизги мааниге негизделет (тактап айтканда, негизги элементтин туурасы). Бул толтургуч-сол жана толтуруучу-оң үчүн ачык-айкын, толтуруучу-үстүнө жана толтургуч-ылдый үчүн таң калыштуу, бирок бул учурда абдан пайдалуу.
Эгер сиз 16: 9 форматтарынын катышын кааласаңыз, анда туурасын тандайсыз: 100%; padding-bottom: 56.25%;. Алтын катышты эске алган тараптардын катышы - бул туурасы: 100%; асты толтуруу: 61.81%; ишке ашырылат.
Calc жардамы менен сиз кадрлардын катышын түздөн-түз көрсөтсөңүз болот, мисалы 16: 9 үчүн асты толтурулган: calc (1 / (16/9) * 100%). Эгерде элемент андан ары, уяланган элементтерден турса, негизги элемент толуктоо үчүн, толук элемент жайгаштырылат:
1bc3a80de3db90cdf0535541236d95f2
Бул төмөнкү натыйжага алып келет: