Ma ke ʻano he mea hoʻomohala pūnaewele, hoʻohilahila pinepine ʻia kekahi e hana me nā mea HTML e lākou iho - ʻokoʻa i ke kumu img, no ka laʻana - ʻaʻohe o lākou nui i hoʻopaʻa ʻia a i ʻole ka lakio lākiō paʻa. Makemake pinepine ʻoe e hoʻokō i kēia mau mea me ka pane pane, akā mālama ʻia ka mahele ma waena o ka laulā a me ke kiʻekiʻe. ʻAʻole hāʻawi ʻo CSS i kahi hopena intuitive ma ke ʻano paʻamau. Akā me ke kōkua o ka pale padding waiwai hiki iā ʻoe ke hoʻokō i kāu pahuhopu.
E lawe i ka la lā i nā laʻana o nā kiʻi ʻatikala pāhaʻohaʻo, ʻaʻole pono nā kiʻi e huinahā, akā makemake mākou e hōʻike iā lākou me ka lākiō hiʻohiʻona 1: 1 me ka ʻole o kahi hana hou a ma luna o nā mea āpau me ka ʻole o ka distortion, kahi e hoʻololi ai ka laulā (a pēlā ke kiʻekiʻe). pono. Me ke code aʻe he mea maʻalahi ke hana i kēia me ka ʻole o ka markup hou me ke kōkua o CSS:
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: