Веб-иштеп чыгуучу катары сиз 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
Бул төмөнкү натыйжага алып келет: