Njengonjiniyela wewebhu, umuntu uhlala enamahloni okusebenza nezinto ze-HTML ngokwazo - ngokungafani nento ye-img, ngokwesibonelo - abanasayizi omisiwe noma isilinganiso esilinganisiwe sesici. Imvamisa ufuna ukufeza ukuthi lezi zinto ziziphatha kahle, kepha isilinganiso esiphakathi kobubanzi nokuphakama sigcinwa. I-CSS ayinikezeli ngesisombululo enembile lapha ngokuzenzakalela. Kepha ngosizo lwempahla yokubamba mpo ungafinyelela inhloso yakho.
Masithathe isibonelo sansuku zonke semifanekiso eyisikwele, imidwebo yayo engeyona isikwele, kepha singathanda ukuyibonisa ngaphandle komzamo owengeziwe futhi ngaphezu kwakho konke ngaphandle kokuhlanekezelwa ngobubanzi besilinganiselo 1: 1, lapho ububanzi babo (futhi kanjalo nobude) buguquka ngokuphendula kufanele. Ngekhodi elandelayo kulula kakhulu ukwenza lokhu ngaphandle komaki owengeziwe ngosizo lwe-CSS:
1bc3a80de3db90cdf0535541236d95f2
nomphumela
Kepha kungani isebenza futhi kungakhiwa kanjani ezinye izilinganiso zesici? Ukhiye walokhu ulele empahleni ye-padding, enikezwe ngamanani wamaphesenti - ihlala isuselwa kunani elifanayo eliyisisekelo njengempahla ye-Width (okungukuthi ububanzi bento yomzali). Nge-padding-left kanye ne-padding-right lokhu kusobala, nge-padding-top ne-padding-bottom kuyamangaza, kepha kuyasiza kakhulu kuleli cala.
Uma ufuna isilinganiso sesici esingu-16: 9, ngokwesibonelo, ukhetha ububanzi bamanani: 100%; i-padding-bottom: 56.25%;. Isilinganiso sesici esithathela i-golden ratio kububanzi: 100%; i-padding-bottom: 61.81%; kuyabonakala.
Ngosizo lwe- calc ungacacisa ngqo isilinganiso sesici, ngokwesibonelo esingu-16: 9 nge-padding-bottom: calc (1 / (16/9) * 100%). Uma i-elementi iqukethe izinto ezengeziwe, ezihlanganisiwe, into yengane ibekwe ngokuphelele ukunxephezela ukukhishwa kwento yomzali:
1bc3a80de3db90cdf0535541236d95f2
Lokhu kuholela emphumeleni olandelayo: