Որպես վեբ ծրագրավորող, դուք հաճախ հայտնվում եք HTML տարրերի հետ աշխատելու երկընտրանքի մեջ, որոնք, ի տարբերություն, օրինակ, img տարրի, չունեն ոչ ֆիքսված չափ, ոչ էլ ֆիքսված հարաբերակցություն: Հաճախ դուք ցանկանում եք համոզվել, որ այս օբյեկտները արձագանքում են, բայց լայնության և բարձրության միջև հարաբերակցությունը պահպանվում է: Լռելյայնորեն, CSS-ն այստեղ ինտուիտիվ լուծում չի առաջարկում: Բայց ուղղահայաց լիցքավորման հատկության օգնությամբ դուք կարող եք հասնել ձեր նպատակին:
Եկեք վերցնենք քառակուսի ապրանքի պատկերների առօրյա օրինակը։ Չնայած գրաֆիկան ինքնին պարտադիր չէ, որ քառակուսի լինի, մենք կցանկանայինք դրանք ցուցադրել 1:1 կողմերի հարաբերակցությամբ՝ առանց որևէ լրացուցիչ ջանքի կամ աղավաղման, և դրանց լայնությունը (և, հետևաբար, բարձրությունը) պետք է փոխվի արձագանքողաբար։ Հետևյալ կոդը հեշտացնում է դա իրականացնելը՝ օգտագործելով CSS՝ առանց որևէ լրացուցիչ նշագրման։:
1bc3a80de3db90cdf0535541236d95f2
արդյունքով:
Բայց ինչո՞ւ է սա աշխատում և ինչպե՞ս կարող են ստեղծվել այլ հարաբերակցություններ: Դրա բանալին գտնվում է padding հատկության մեջ, որը, որը նշված է տոկոսային արժեքներով, միշտ հիմնված է նույն հիմնական արժեքի վրա, ինչ Width հատկությունը (մասնավորապես՝ մայր տարրի լայնությունը): Սա ակնհայտ է padding-left-ի և padding-right-ի համար, զարմանալի է padding-top-ի և padding-stop-ի համար, բայց շատ օգտակար է այս դեպքում:
Եթե ցանկանում եք, օրինակ, 16: 9 կողմի հարաբերակցություն, ապա ընտրում եք արժեքների լայնությունը `100%; լրացնելով ներքևում` 56,25%; Ոլորտի հարաբերակցությունը, որը հաշվի է առնում ոսկե հարաբերակցությունը, լայնությունն է `100%; լրացման ներքևում` 61,81%; իրագործելի:
Հաշվարկի օգնությամբ դուք կարող եք ուղղակիորեն նշել կողմի հարաբերակցությունը, օրինակ `16: 9-ի համար` լրացնելով ներքևով. Calc (1 / (16/9) * 100%): Եթե տարրը բաղկացած է հետագա, բնադրված տարրերից, մանկական տարրը տեղադրվում է բացարձակապես ՝ փոխհատուցելու ծնողի տարրի լիցքը::
1bc3a80de3db90cdf0535541236d95f2
Սա հանգեցնում է հետևյալ արդյունքի: