Njengomphuhlisi wewebhu, udla ngokuzifumana usengxakini yokusebenza ngezinto ze-HTML ezingafaniyo ne-img element, umzekelo-ayinawo ubungakanani obumiselweyo okanye umlinganiselo omiselweyo. Rhoqo ufuna ukuqinisekisa ukuba ezi zinto ziziphatha ngokuphendula, kodwa umlinganiselo phakathi kobubanzi nobude bugciniwe. Ngokungagqibekanga, i-CSS ayinikezeli ngesisombululo esicacileyo apha. Kodwa ngoncedo lwepropathi yokupakisha ethe nkqo unokufezekisa injongo yakho.
Masithathe umzekelo wemihla ngemihla wemifanekiso yemveliso yesikwere. Nangona imizobo ngokwayo ingabi sisikwere ngokuyimfuneko, singathanda ukuyibonisa ngomlinganiselo we-1:1 ngaphandle komzamo okanye ukugqwethwa okongezelelweyo, kwaye ububanzi bayo (kwaye ke ngoko ukuphakama) kufuneka butshintshe ngokuphendulayo. Le khowudi ilandelayo yenza kube lula ukufezekisa oku usebenzisa i-CSS ngaphandle kophawu olongezelelweyo.:
1bc3a80de3db90cdf0535541236d95f2
ngeziphumo:
Kodwa kutheni lo msebenzi usebenza kwaye unokudalwa njani eminye imiba? Isitshixo kule nto silele kwipropathi yokucoca, leyo - echazwe ngokwepesenti yamaxabiso - isoloko isekelwe kwixabiso elisisiseko elifanayo njengepropathi yobubanzi (oku kukuthi ububanzi bento yomzali). Oku kucacile kwi-padding-ekhohlo kunye ne-padding-right, iyamangalisa kwi-padding-top kunye ne-padding-bottom, kodwa iluncedo kakhulu 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: