Paano Itakda ang Posisyon ng isang Larawan sa CSS?

Paano Itakda Ang Posisyon Ng Isang Larawan Sa Css



Itinakda ng mga developer ang posisyon ng isang imahe upang magtatag ng isang malinaw na visual hierarchy sa pamamagitan ng pagtukoy sa pagkakasunud-sunod at mga sukat ng imahe na nauugnay sa iba pang mga elemento ng HTML. Sa pamamagitan ng paglalagay ng imahe sa iba't ibang posisyon, maaari ding makabuo ng moderno, kakaiba, at custom na disenyo na maaaring magbago sa hitsura at pakiramdam ng website. Ipinapakita ng artikulong ito ang pamamaraan para sa pagtatakda ng posisyon ng isang imahe gamit ang CSS.

Paano Itakda ang Posisyon ng isang Larawan sa CSS?

Sa pamamagitan ng pagtatakda ng posisyon ng isang imahe sa CSS, ang mga benepisyo tulad ng ' tumpak na pagkakalagay ”, “ magkakapatong na elemento 'at' tumutugon na disenyo ” ay madaling makamit. Gamit ang mga benepisyong ito, ang mga developer ay madaling mako-customize at bumuo ng isang ganap na gumagana at kapansin-pansing website. Mayroong dalawang paraan/properties kung saan maaaring itakda ang posisyon ng isang imahe. Ang mga katangiang ito ay inilalarawan sa ibaba:





Paraan 1: Paggamit ng Float Property

Ang ' lumutang Ang ” property ay ibinibigay ng CSS para sa paggalaw ng mga elemento ng HTML sa “ umalis 'o' tama ” direksyon. Ito ay kadalasang ginagamit habang lumilikha ng tumutugon na layout para sa tumpak na paglalagay ng mga elemento ng HTML.



Halimbawa, ang property na 'float' ay ginagamit para sa pag-align ng mga larawan sa kaliwa at kanang bahagi ng webpage:



< div >
< img src = 'bg.jpg' taas = '300px' lapad = '400px' klase = 'posisyonRight' >
< img src = 'book.jpg' taas = '300px' lapad = '400px' klase = 'positionLeft' >
div >


Sa code sa itaas:



    • Una, ang ugat ' div ” elemento ay nilikha na gumagana bilang isang lalagyan para sa mga elemento ng HTML.
    • Susunod, dalawa' 'Ang mga tag ay ginagamit sa loob ng '
      ” tag.
    • Pagkatapos nito, ang mga halaga ng ' 300px 'at' 400px 'ay ibinibigay sa' taas 'at' lapad 'mga katangian ng pareho' ” mga tag.
    • Gayundin, magtalaga ng klase ng ' posisyonTama 'at' posisyon Kaliwa ” sa una at pangalawang tag na “ ”, ayon sa pagkakabanggit.

Ngayon, ipasok ang '