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