Njengomphuhlisi wewebhu, uhlala uneentloni ukusebenza nezinto ze-HTML ngokwazo-ngokuchaseneyo ne-img element, umzekelo-abanobungakanani obumiselweyo okanye umlinganiso wempawu. Rhoqo ufuna ukufezekisa ukuba ezi zinto ziziphatha ngokuphendula, kodwa umlinganiso phakathi kobubanzi nokuphakama uyagcinwa. I-CSS ayiboneleli ngesisombululo esinomdla apha ngokwendalo. Kodwa ngoncedo lwepropathi yokulinganisa ethe nkqo ungayiphumeza injongo yakho.
Masithathe umzekelo wemihla ngemihla yemifanekiso eqingqiweyo yesikwere, imizobo yayo enganyanzelekanga ukuba ibe sisikwere, kodwa singathanda ukuyibonisa ngaphandle komzamo ongezelelweyo kwaye ngaphezulu kwako konke ngaphandle kokugqwetha kunye nomlinganiso wenqanaba 1: 1, apho ububanzi (kwaye ke ngokunjalo nokuphakama) kutshintsha ngokufanelekileyo kufanele. Ngale khowudi ilandelayo kulula kakhulu ukwenza oku ngaphandle kokongezwa ngoncedo lweCSS:
1bc3a80de3db90cdf0535541236d95f2
ngeziphumo
Kodwa kutheni isebenza kwaye inokwenziwa njani eminye imilinganiselo? Isitshixo soku kulele kwipropathi yokuhombisa, ethi inikwe ngamaxabiso epesenti- ihlala isekwe kwixabiso elifanayo elisisiseko njengepropathi yoBubanzi (oko kukuthi ububanzi bento yomzali). Nge-padding-yasekhohlo kunye ne-padding-ekunene oku kuyacaca, nge-padding-top kunye ne-padding-ezantsi iyamangalisa, kodwa iluncedo olukhulu kule meko.
Umzekelo, ukuba ufuna umlinganiso we-16: 9, ukhetha ububanzi bexabiso: 100%; ukugoba-ezantsi: 56.25%;. Umlinganiso wento ethatha umlinganiso wegolide kwiakhawunti ububanzi: 100%; ukugoba-ezantsi: 61.81%; iyaqondakala.
Ngoncedo lwe- calc ungachaza ngokuthe ngqo umlinganiso, umzekelo nge-16: 9 nge-padding-bottom: calc (1 / (16/9) * 100%). Ukuba into iqulathe ezinye izinto ezihleliweyo, into yomntwana ibekwe ngokupheleleyo ukubuyekeza ukugoqwa kwento yomzali:
1bc3a80de3db90cdf0535541236d95f2
Oku kukhokelela kwiziphumo ezilandelayo: