Ma ke ʻano he mea hoʻomohala pūnaewele, ʻike pinepine ʻoe iā ʻoe iho e hana ana me nā mea HTML, ʻaʻole like me ka mea `img`, ʻaʻohe ona nui paʻa a i ʻole ka lakio hiʻohiʻona. I ka manawa pinepine, makemake ʻoe i kēia mau mea e hana me ka pane ʻana me ka mālama ʻana i ka lakio ma waena o ka laulā a me ke kiʻekiʻe. ʻAʻole hāʻawi ʻo CSS i kahi hopena intuitive ma ka paʻamau. Eia nō naʻe, hiki i ka waiwai padding vertical ke hoʻokō i kēia.
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 holo ai a pehea e hana ai i nā lakio hiʻohiʻona ʻē aʻe? Aia ke kī o kēia i ka waiwai padding, i hāʻawi ʻia i nā helu pākēneka - ma muli o ke kumu waiwai like me ka waiwai laulā (ʻo ia hoʻi ka laulā o ka mea makua). Me ka pale pale-hema a me ka pale-akaka ua maopopo kēia, me ka pale-luna a me ka pale-lalo ke kahaha, 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: