Ma ke ʻano he mea hoʻomohala pūnaewele, ʻike pinepine ʻoe iā ʻoe iho i loko o ka pilikia o ka hana ʻana me nā mea HTML - ʻaʻole like me ka img element, no ka laʻana - ʻaʻole i paʻa ka nui a i ʻole ka lakene hiʻohiʻona paʻa. I ka manawa pinepine, makemake ʻoe e hōʻoia i ke ʻano o kēia mau mea, akā mālama ʻia ka ʻāpana ma waena o ka laulā a me ke kiʻekiʻe. Ma ka maʻamau, ʻaʻole hāʻawi ʻo CSS i kahi hopena intuitive ma aneʻi. Akā me ke kōkua o ka waiwai padding vertical hiki iā ʻoe ke hoʻokō i kāu pahuhopu.
E lawe kākou i ka laʻana o kēlā me kēia lā o nā kiʻi huahana huinahā. ʻOiai ʻaʻole pono nā kiʻi ponoʻī he huinahā, makemake mākou e hōʻike iā lākou me ka lakio hiʻohiʻona 1:1 me ka ʻole o ka hoʻoikaika hou a i ʻole ka hoʻopilikia ʻana, a ʻo ko lākou laulā (a no laila ke kiʻekiʻe) e loli koke. ʻO ke code ma lalo nei e maʻalahi ai ka hoʻokō ʻana i kēia me ka hoʻohana ʻana i ka CSS me ka ʻole o ka markup hou.:
1bc3a80de3db90cdf0535541236d95f2
me ka hopena:
Akā no ke aha e hana ai kēia a pehea e hana ʻia ai nā lākiō ʻē aʻe? ʻO ke kī o kēia aia i ka waiwai padding, kahi - i kuhikuhi ʻia i nā helu pākēneka - e hoʻokumu mau ʻia i ka waiwai kumu like me ka waiwai Width (ʻo ia ka laulā o ka mea makua). ʻIke ʻia kēia no ka padding-hema a me ka padding-right, kāhāhā no ka padding-top a me ka padding-bottom, akā kōkua nui i kēia hihia.
Inā makemake ʻoe i ka lakio hiʻohiʻona 16: 9, no ka laʻana, koho ʻoe i ka laulā o nā waiwai: 100%; pale-lalo: 56.25%;. ʻO kahi hiʻohiʻona hiʻohiʻona e lawe i ka lakio gula i ka helu ka laulā: 100%; pale-lalo: 61.81%; ʻike ʻia.
Me ke kōkua o ka helu hiki iā ʻoe ke kikoʻī i ka lākiō hiʻohiʻona, e laʻa me 16: 9 me ka pale-lalo: ka helu (1 / (16/9) * 100%). Inā ʻo ke kumumanaʻo hou aʻe, nā ʻenemi i kau ʻia, hoʻonohonoho pono ʻia ke keiki e uku no ka pale o ka makua:
1bc3a80de3db90cdf0535541236d95f2
Alakaʻi kēia i ka hopena aʻe: