Hotuna wani muhimmin bangare ne na ƙirƙirar abun ciki na yanar gizo kamar yadda za su iya isar da bayanai ta hanya mai ban sha'awa. Lokacin haɗa hotuna a cikin shafin HTML, yana da mahimmanci don tabbatar da cewa an daidaita su kuma an daidaita su daidai don daidaitaccen gabatarwar gani. A cikin wannan labarin, za mu bincika dalla-dalla kan tsarin yadda ake tsakiyar hotuna a cikin HTML kuma mu ba da misalai masu amfani don taimaka muku ƙwarewar wannan fasaha. Shirya don inganta bayyanar hotunan ku a cikin ayyukanku yanar gizo!
1. Gabatarwa ga daidaita hoto a HTML
Daidaita hotuna a cikin HTML muhimmin al'amari ne yayin zayyana shafukan yanar gizo. Hoton da aka daidaita daidai zai iya inganta bayyanar da kwararar gani na shafi, yana ba da ƙarin jin daɗi da ƙwarewar mai amfani.
Akwai hanyoyi da yawa don daidaita hotuna a cikin HTML. Mafi na kowa shine a yi amfani da kadarorin "rubutu-align" CSS tare da ƙimar "tsakiya", "hagu" ko "dama". Wannan zai daidaita hoton zuwa tsakiya, hagu, ko dama na rubutun da ke kewaye. Misali:
«`
«`
Hakanan yana yiwuwa a daidaita hotuna ta amfani da alamar "align" HTML. Wannan alamar tana karɓar dabi'u "hagu", "dama" da "tsakiya", amma ana ganin ba a daina aiki ba tun HTML5. Don haka, ana ba da shawarar yin amfani da CSS maimakon. Koyaya, idan kuna buƙatar tallafawa tsofaffin masu bincike, zaku iya amfani da alamar daidaitawa. Misali:
«`
«`
Ka tuna cewa yana da mahimmanci a yi amfani da sifofi na "alt" akan hotunanka don samar da madadin bayanin ga nakasassu. Hakanan, guje wa amfani da jeri fiye da kima, saboda wannan na iya yin mummunan tasiri ga karantawa da tsarin shafinku. Gwada tare da zaɓuɓɓuka daban-daban kuma nemo jeri wanda ya fi dacewa da ƙirar ku.
2. Tushen Daidaita Hoto a HTML
Su ne muhimmin al'amari da za a yi la'akari da su lokacin zayyana gidan yanar gizo. Daidaita daidaitattun hotuna na iya inganta yanayin gani na shafin da ƙwarewar mai amfani. A ƙasa akwai matakan daidaita hotuna a cikin HTML:
1. Yi amfani da 'tag`don saka hoton cikin lambar HTML ɗinku. Tabbatar saka sifa 'src' don nuna hanyar hoton akan sabar ku. Don daidaita girman hoton, zaku iya amfani da halayen 'nisa' da 'tsawo'. Misali:
"`html
«`
2. Don daidaita hoto a kwance, zaku iya amfani da sifa ta `align` a cikin `tag`. Wannan sifa tana goyan bayan ƙimar ''hagu'', ''dama'', da '''tsakiya''. Misali:
"`html
«`
3. Idan kana son daidaita hoto a tsaye, zaka iya amfani da sifa ta `tsaye-align` a cikin tag``. Wannan sifa tana goyan bayan ƙimar '' saman' '', ''tsakiyar'', da ''kasa''. Misali:
"`html
«`
Waɗannan wasu ne kawai daga cikinsu. Ka tuna cewa za ku iya amfani da CSS don haɓakawa da kuma sarrafa bayyanar hotuna a shafin yanar gizonku. Gwaji tare da haɗuwa daban-daban na halaye da salo don samun sakamakon da ake so.
3. HTML tags don daidaita hotuna
HTML tags kayan aiki ne mai mahimmanci don ƙira da tsarin shafin yanar gizon. Ɗaya daga cikin abubuwan da suke bayarwa shine ikon daidaita hotuna daidai. A cikin wannan sashin, za a bincika alamun da aka fi amfani da su don cimma wannan manufa.
Alamar farko da za mu iya amfani da ita ita ce . Wannan alamar tana ba mu damar saka hoto a shafin yanar gizon mu. Don daidaita hoton a kwance, zamu iya amfani da sifa ta daidaita tare da ƙimar "hagu" ko "dama". Misali, idan muna son daidaita hoto zuwa hagu, zamu iya amfani da lambar
. Idan muna so mu daidaita shi zuwa dama, muna amfani da darajar "dama" maimakon "hagu".
Wani zaɓi don daidaita hotuna shine amfani da alamar
. Ta wannan hanyar hoton zai kasance a tsakiya a daidaita tsakanin div.
A ƙarshe, za mu iya amfani da tag
.
4. Yadda ake tsakiyar hotuna ta amfani da salon CSS
Akwai hanyoyi da yawa don tsakiyar hotuna ta amfani da salon CSS. A ƙasa akwai hanyoyi guda uku da ake amfani da su don cimma wannan:
1. Gefen atomatik: Hanya mai sauƙi don tsakiyar hoto ita ce amfani da gefe ta atomatik zuwa hagu da dama. Ana iya samun wannan ta amfani da dokar CSS mai zuwa: margin: 0 auto;. Tare da wannan dukiya, za a sanya hoton a tsakiyar tsakiyar kwandon sa.
2. Flexbox: Wata hanya mai tasiri don sanya hotuna a tsakiya ita ce amfani da flexbox. Ta hanyar yin amfani da waɗannan dokokin CSS masu zuwa ga akwati na iyaye: display: flex; y justify-content: center;, za a sanya hoton a cikin tsakiyar kwancen akwati. Lura cewa a wannan yanayin dole ne akwati ya kasance yana da ƙayyadaddun faɗin ko ya zama faɗin 100%.
3. Canji: Hakanan ana iya amfani da kayan canza kayan CSS zuwa tsakiyar hotuna. Don cimma wannan, ana iya amfani da dokar CSS mai zuwa akan hoton: transform: translateX(-50%);. Wannan zai canza hoton zuwa hagu da kashi 50% na fadinsa, yana sanya shi a cikin akwati. Bugu da ƙari, yana da mahimmanci don tabbatar da cewa kwandon yana da dukiya position: relative; ta yadda za a yi amfani da canji daidai.
Ka tuna cewa waɗannan kawai wasu misalai yadda ake tsakiyar hotuna ta amfani da CSS. Yana da mahimmanci don daidaita hanyoyin bisa ga takamaiman bukatun kowane aikin kuma la'akari da dacewa da masu bincike daban-daban.
5. Amfani da CSS Properties zuwa Cibiyar Hotuna a HTML
Don tsakiyar hotuna a cikin HTML, ana iya amfani da kaddarorin CSS iri-iri. A ƙasa akwai wasu daga cikin waɗanda aka fi sani:
1. Ana iya amfani da dukiyar "nuna" tare da darajar "flex" a cikin akwati na hoton don tsakiyar shi a kwance da kuma tsaye. Misali:
"`html
«`
2. Wani zaɓi shine don amfani da kayan "rubutu-align" tare da ƙimar "tsakiya" a cikin akwati na hoto. Wannan dabarar tana sanya hoton a kwance kawai. Misali:
"`html
«`
3. Idan kuna son tsakiyar hoton kawai a kwance, zaku iya amfani da kayan "margin" tare da dabi'u "auto" a gefen hagu da dama na akwati na hoton. Don haka:
"`html
«`
Waɗannan su ne kawai wasu hanyoyin da za a iya saita hotuna a cikin HTML ta amfani da kaddarorin CSS. Dangane da tsarin da gidan yanar gizo kuma daga ƙayyadaddun buƙatun, za a iya zaɓar fasaha mafi dacewa. Ka tuna cewa waɗannan mafita za a iya gyaggyarawa da daidaita su kamar yadda ya cancanta don dacewa da ƙira da salon kowane gwaji kuma sami mafi kyawun zaɓi a gare ku!
6. Babban Hanyoyin Cire Hoto a HTML
A cikin HTML, akwai hanyoyin ci-gaba da yawa waɗanda za a iya amfani da su don saita hotuna cikin madaidaicin tsari da sarrafawa. Waɗannan hanyoyin suna ba da damar mai ƙirar gidan yanar gizo don cimma kyan gani mai ban sha'awa da kuma tabbatar da cewa hotuna sun daidaita daidai da abubuwan da ke kewaye.
Hanyar da aka saba amfani da ita ita ce a yi amfani da kadarorin "margin: auto" CSS a haɗe tare da saita faɗin hoton. Don cimma wannan, kawai saita ƙayyadaddun nisa don hoton sannan a yi amfani da kayan "margin: auto" zuwa gare ta. Wannan zai sanya hoton a kwance a cikin akwati.
Wata hanyar ci gaba zuwa tsakiyar hotuna tana amfani da flexbox. Flexbox samfuri ne mai sassauƙan shimfidar wuri wanda ke ba da damar abubuwan da ke cikin akwati su tsara su kuma daidaita su ta hanya mai sarrafa kansa. Don tsakiyar hoto ta amfani da akwatin flex, dole ne ku nannade hoton a cikin akwati kuma kuyi amfani da kaddarorin CSS masu zuwa ga akwati: "nuni: flex", "justify-content: center" da "align-items: center". Wannan zai daidaita hoton duka a tsaye da a kwance a tsakiyar akwati.
Baya ga waɗannan hanyoyin, akwai wasu fasahohin ci-gaba waɗanda za a iya amfani da su don saita hotuna a cikin HTML, kamar yin amfani da kadarorin "matsayi: cikakke" a hade tare da "saman: 50%" da "hagu: 50%" dabi'u. ya biyo bayan canjin CSS don sake mayar da hoton daidai. Koyaya, waɗannan hanyoyin sun fi rikitarwa kuma suna buƙatar zurfin ilimin CSS. A takaice, suna ba da damar gyare-gyare mafi girma da daidaito a cikin daidaitawar hotuna, da inganta yanayin gani na shafin yanar gizon.
7. Gyara matsalolin gama gari lokacin sanya hotuna a cikin HTML
Akwai matsalolin gama gari da yawa lokacin sanya hotuna a cikin HTML, amma an yi sa'a, akwai mafita mai sauƙi da inganci ga kowannensu. Idan kuna fuskantar matsalar samun hoto don daidaita daidai a lambar HTML ɗinku, bi waɗannan matakan don warware matsalar:
1. Yi amfani da kadarorin "rubutu-align" CSS don tsakiyar hoton da ke cikin akwati. Tabbatar yin amfani da ƙimar "cibiyar" zuwa kayan "rubutu-align" a cikin zaɓin CSS wanda ya dace da kwandon hoton. Misali:
"`html
«`
2. Idan har yanzu hoton baya tsakiya, duba cewa fadinsa bai kai ko daidai da fadin kwandon ba. Kuna iya saita faɗin hoton ta amfani da dukiyar faɗin CSS a cikin zaɓin da ya dace. Misali:
"`html
«`
3. Idan hoton ya fi girma fiye da akwati kuma kana son ya dace ta atomatik, zaka iya amfani da dukiyar CSS "max-nisa" tare da darajar "100%". Wannan zai ba da damar rage girman hoton don dacewa da akwati ba tare da rasa yanayin sa ba. Misali:
"`html
«`
Ta bin waɗannan matakan, za ku sami damar magance yawancin matsalolin yayin sanya hotuna a cikin HTML. Tuna don daidaita masu zaɓe da sunayen fayil zuwa lambar ku. Idan har yanzu hotunan ba su daidaita daidai ba, duba lambar ku don yuwuwar kurakurai kuma ku tabbata ana amfani da salon CSS daidai.
8. La'akari da Samun damar Lokacin Tsara Hotuna a cikin HTML
Muhimmiyar la'akari lokacin da aka sanya hotuna a cikin HTML shine tabbatar da cewa shafin yana samun dama ga duk mutane, gami da waɗanda ke da nakasar gani. Akwai fasahohi da yawa waɗanda zasu iya taimakawa cimma daidaitattun dama yayin sanya hotuna a cikin HTML.
Hanya ɗaya don yin wannan ita ce ta amfani da madadin (alt) halaye akan alamun hoto. Siffar alt tana ba da rubutun siffa wanda ke nunawa lokacin da hoton ya kasa ɗauka ko lokacin da mai karanta allo ya karanta shi. Yana da mahimmanci a ba da cikakken bayanin hoton domin mutanen da ba za su iya gani ba su fahimci abin da ke cikinsa.
Wani abin la'akari shine amfani da alamun Semantic a HTML. Lokacin sanya hotuna a tsakiya, yana da kyau a yi amfani da alamun da suka dace kamar
Yana da mahimmanci don gwada samun damar shafin ta amfani da kayan aiki da masu dubawa. Waɗannan kayan aikin na iya gano matsalolin da za su iya yuwuwa kuma suna ba da shawarwari don haɓaka samun dama. Har ila yau, yana da mahimmanci a tuna cewa launukan da aka yi amfani da su zuwa tsakiyar hotuna dole ne su sami isasshen bambanci don tabbatar da cewa suna iya gani ga dukan mutane, musamman ma wadanda ke da nakasa. Ta bin waɗannan la'akari da damar samun dama, za ku iya cimma daidaitattun gabatarwar hotuna masu tazara da HTML waɗanda ke da isa da fahimta ga duk masu amfani.
9. Mafi kyawun ayyuka don sanya hotuna a cikin HTML
Tsaya hotuna a cikin HTML aiki ne na gama gari yayin zayyana shafukan yanar gizo. A ƙasa akwai wasu mafi kyawun ayyuka don ingantaccen sanya hotunan ku.
1. Yi amfani da lakabin na HTML don saka hotunan ku a cikin shafin. Tabbatar cewa kun samar da madaidaiciyar hanya zuwa hoton a cikin sifa src na alamar. Misali:
.
2. Don tsakiyar hoto a kwance, zaku iya amfani da kadarorin "margin" CSS tare da dabi'u "auto" da "nuni" saita zuwa "toshe." Ta wannan hanyar za a sanya hoton a tsakiyar akwati. Ƙara lambar CSS mai zuwa zuwa fayil ɗin salon ku: img { nuni: toshe; gefe-hagu: kai; gefe-dama: kai; }
3. Idan kana son sanya hoto a tsakiya da kuma a tsaye, zaka iya amfani da hanyar flexbox. Aiwatar da waɗannan dokokin CSS masu zuwa ga kwandon hoton: .container { nuni: flex; gaskata-abun ciki: tsakiya; daidaita-kayan: tsakiya; }. Tare da wannan hanya, za a sanya hoton a tsakiya a kwance da kuma a tsaye a cikin akwati.
Ka tuna cewa yin amfani da hotuna masu mahimmanci akan shafinku na iya taimakawa wajen inganta bayyanar da ƙwarewar mai amfani. Ta bin waɗannan ayyukan, za ku sami damar cimma tasiri mai ban sha'awa kuma mai ban sha'awa don hotunan HTML ɗinku. Kada ku yi shakka don gwada hanyoyi daban-daban kuma daidaita su bisa ga takamaiman bukatunku!
10. Dabarun daidaita hotuna akan na'urori da fuska daban-daban
Ɗaya daga cikin mahimman la'akari lokacin zayyana gidan yanar gizon shine tabbatar da cewa hotuna sun daidaita daidai na'urori daban-daban da fuska. Wannan yana da mahimmanci musamman saboda girma da ƙuduri daban-daban waɗanda na'urorin da masu amfani ke amfani da su na iya samu. A ƙasa akwai dabaru goma don cimma daidaitattun hoto akan na'urori daban-daban da screens:
1. Yi amfani da tambayoyin kafofin watsa labarai: Tambayoyin watsa labarai suna ba ku damar amfani da takamaiman salon CSS bisa ga halayen na'urar. Ana iya amfani da su don saita girma dabam dabam, matsayi da margin don hotuna akan girman allo daban-daban.
2. Yi amfani da kashi ko raka'o'in dangi: Maimakon amfani da ƙayyadaddun ma'auni kamar pixels don tantance girman hotuna, yana da kyau a yi amfani da kaso ko dangi kamar "em" ko "rem". Waɗannan raka'o'in za su daidaita ta atomatik bisa girman allo, suna tabbatar da daidaita hoton da ya dace.
3. Yi amfani da hotuna masu amsawa: Hotuna masu amsa suna daidaita ta atomatik bisa girman allo, tabbatar da sun daidaita daidai akan na'urori daban-daban. Don cimma wannan, ana iya amfani da dabaru irin su yin amfani da sifa ta "srcset" a cikin HTML ko yin amfani da kadarorin ''background-size'' a cikin CSS.
4. Haɓaka girma da tsarin hotuna: Yana da mahimmanci don inganta girman da tsarin hotuna don su yi sauri a kan na'urori daban-daban. Ana ba da shawarar yin amfani da kayan aikin damfara hoto da amfani da tsari irin su JPEG ko WebP, waɗanda ke ba da kyakkyawar alaƙa tsakanin inganci da girman fayil.
5. Gwaji akan na'urori daban-daban da masu bincike: Don tabbatar da cewa hotuna sun daidaita daidai a kan dukkan na'urori da masu bincike, ana buƙatar gwaji mai yawa. Ana ba da shawarar gwadawa akan girman allo daban-daban, na'urorin hannu, da mashahuran masu bincike don gano abubuwan da za su iya daidaitawa.
6. Yi amfani da tsarin ƙira ko ɗakunan karatu: Akwai ginshiƙai daban-daban masu amsawa da ɗakunan karatu waɗanda zasu iya sauƙaƙe aiwatar da daidaita hotuna akan na'urori daban-daban. Wasu shahararrun zaɓuɓɓuka sune Bootstrap, Foundation da Bulma, waɗanda ke ba da ƙayyadaddun abubuwan da aka tsara da kuma salo waɗanda aka inganta don nuni daidai akan girman allo daban-daban.
7. Tabbatar cewa ana samun damar hotuna: Yana da mahimmanci a yi la'akari da damar shiga yayin zayyana gidan yanar gizon, kuma wannan ya shafi hotuna kuma. Ana ba da shawarar cewa kayi amfani da sifa ta "alt" a cikin alamun hoto don samar da madadin rubutu mai siffa don nunawa idan mai karanta allo ba zai iya lodawa ko karanta hoton ba.
8. Guji jeri tilas na hotuna: Yana da kyau a guji amfani da salon CSS masu tilasta daidaita hotuna, saboda hakan na iya haifar da matsala akan na'urori da allo daban-daban. Ya fi dacewa a yi amfani da ma'aunin dangi da ba da damar hotuna su daidaita bisa dabi'a bisa girman allo.
9. Yi la'akari da sarari mara kyau: Wuri mara kyau, wanda kuma aka sani da tazarar fari, yana da mahimmanci don tabbatar da daidaitattun hotuna. Yana da kyau a bar isasshiyar tazara a kusa da hotuna don hana yanke su ko karkatar da su lokacin da aka duba su akan na'urori ko allo daban-daban.
10. Saka idanu akai-akai da daidaitawa: Tsayawa da daidaita hotuna akan na'urori da fuska daban-daban tsari ne mai ci gaba. Yana da mahimmanci a koyaushe a saka idanu da daidaita tsarin hotunan ku don tabbatar da sun yi daidai akan duk na'urori, da yin canje-canje idan ya cancanta.
Tare da waɗannan dabarun, yana yiwuwa a cimma daidaitattun hotuna akan na'urori da fuska daban-daban. Bin waɗannan matakan zai tabbatar da ingantaccen ƙwarewar mai amfani komai na'urar da masu ziyartar gidan yanar gizon ku ke amfani da su.
11. Kayan aiki masu amfani da albarkatu don daidaita hotuna a cikin HTML
A cikin HTML, daidaita hotuna daidai zai iya zama ƙalubale, amma akwai kayan aiki da albarkatu masu amfani da yawa waɗanda zasu iya sauƙaƙe wannan tsari. A ƙasa akwai wasu hanyoyi da dabaru waɗanda zasu taimaka muku daidaita hotuna a cikin HTML yadda ya kamata:
1. Yin amfani da kayan "rubutu-align" CSS: Kuna iya daidaita hotuna a layi tare da rubutun ta amfani da kayan "rubutu-align" CSS. Don yin wannan, kunsa hoton a cikin nau'in toshe, kamar div, sa'an nan kuma sanya kayan "rubutu-align" a cikin akwati. Misali, idan kuna son daidaita hoto zuwa hagu, zaku iya amfani da lambar mai zuwa:
"`html
«`
2. Yi amfani da kadarorin CSS na “float”: Wani zaɓi kuma shine a yi amfani da kayan CSS na “float” don daidaita hotuna a cikin HTML. Kuna iya shawagi hoto zuwa hagu ko dama ta amfani da ƙimar "hagu" da "dama" bi da bi. Misali:
"`html
«`
3. Daidaita hotuna tare da Flexbox: Idan kuna son daidaitawa da daidaitawa, zaku iya amfani da Flexbox. Flexbox sigar shimfidar wuri ce ta CSS wacce ke ba da damar ƙarin iko na ci gaba akan daidaitawa da tsarar abubuwa. Kuna iya daidaita jeri a kwance da a tsaye ta amfani da kaddarorin flexbox CSS. Ga ainihin misali na yadda ake amfani da Flexbox don daidaita hoto a kwance:
"`html
«`
12. Misalai masu amfani na sanya hoto a cikin HTML
A cikin wannan labarin, za mu gabatar muku da misalai masu amfani guda 12 na yadda ake tsakiyar hotuna a HTML. Sanin yadda ake tsakiyar hotuna yana da amfani idan ya zo ga zayyana shafukan yanar gizo ko shafukan yanar gizo, saboda yana inganta bayyanar gani da iya karanta abun ciki. Na gaba, za mu nuna muku hanyoyi daban-daban don cimma wannan tasiri.
1. Cibiyar hoto tare da halayen HTML: Hanyar da ta fi dacewa don tsakiyar hoto ita ce ta amfani da sifofin HTML "align" da "style". Misali, zaku iya ƙara layin lamba mai zuwa zuwa sashin img a cikin lambar HTML ɗinku: align=”cibiyar”. Wannan zai sanya hoton a kwance akan shafin.
2. Cibiyar hoto tare da CSS: Wata hanya don tsakiyar hoto ita ce ta amfani da CSS. Kuna iya ƙirƙirar ajin CSS na musamman ga hotunan da kuke son sanyawa sannan ku yi amfani da shi zuwa ɓangaren img a cikin lambar HTML. Misali, zaku iya amfani da lambar CSS mai zuwa:
«`
«`
Sa'an nan, a cikin lambar HTML ɗinku, ƙara ajin "center-image" zuwa ɓangaren img:
«`
«`
3. Tsare hoto ta amfani da flexbox: Flexbox fasaha ce ta ci gaba don zayyana shafukan yanar gizon da ke ba da damar iko mafi girma akan matsayi da tsarar abubuwa. Don tsakiyar hoto ta amfani da flexbox, kuna buƙatar kunsa shi a cikin akwati sannan ku yi amfani da wasu kaddarorin CSS a cikin akwati. Misali, zaku iya ƙara lambar CSS mai zuwa:
«`
«`
Sannan, a cikin lambar HTML ɗinku, kunsa hotonku a cikin akwati:
«`
«`
Waɗannan ƴan misalai ne na yadda ake tsakiyar hotuna a HTML. Zaɓin hanyar zai dogara ne akan bukatunku da abubuwan da kuke so. Gwada su kuma gwada don nemo wanda ya fi dacewa da aikinku. Sa'a tare da ƙirar gidan yanar gizon ku!
13. Haɓaka aiki yayin sanya hotuna a cikin HTML
Don haɓaka aiki yayin sanya hotuna a cikin HTML, akwai hanyoyi da yawa waɗanda za a iya amfani da su. A ƙasa, za mu gabatar da wasu zaɓuɓɓuka waɗanda za su taimaka muku cimma wannan yadda ya kamata:
Na farko, hanyar gama gari don tsakiyar hoto ita ce ta amfani da alamar `
Madadin shine a yi amfani da salon CSS don tsakiyar hoton. Kuna iya amfani da kayan 'nuni: toshe' ga hoton sannan ku yi amfani da kayan ''margin'' tare da ƙimar atomatik don sanya shi a kwance da kuma a tsaye. Misali:
"`html
«`
Wani zaɓi shine yin amfani da flexbox, dabarar ƙira ta CSS wacce ke ba ku damar rarraba sassauƙa da abubuwan tsakiya. Don tsakiyar hoto tare da flexbox, zaku iya amfani da lambar mai zuwa:
"`html
«`
Waɗannan ƴan hanyoyin ne kawai don tsakiyar hotuna a cikin HTML hanya mai inganci. Ka tuna cewa yana da mahimmanci don inganta aikin gidan yanar gizonku, don haka muna ba da shawarar yin amfani da hanyoyin da suka fi dacewa dangane da bukatun ku da bukatun ƙira.
14. Ƙarshe da shawarwari na ƙarshe don ƙaddamar da hotuna a cikin HTML
Don tsakiyar hotuna a cikin HTML, akwai hanyoyi da yawa da zaku iya amfani da su. A ƙasa akwai wasu ƙarshe da shawarwari don cimma wannan burin.
Da fari dai, zaɓi ɗaya shine a yi amfani da kayan "rubutu-align" a cikin CSS. Kuna iya amfani da wannan kadara zuwa sashin kwantena na hoton, saita ƙimarta zuwa "tsakiya." Ta wannan hanyar za a sanya hoton a tsakiya a kwance a cikin akwati.
Wani madadin shine amfani da alamar "div". don ƙirƙirar akwati don hoton kuma yi amfani da takamaiman salon CSS. Don tsakiyar hoton a kwance, zaku iya saita gefen hagu da dama na akwati zuwa "atomatik", kuma tabbatar da cewa faɗin hoton bai wuce faɗin akwati ba. Bugu da ƙari, don tsakiyar shi a tsaye, zaku iya amfani da kayan "nuna" tare da ƙimar "flex" da kayan "align-items" tare da darajar "tsakiya".
A ƙarshe, idan kuna son sanya hoton bangon baya a cikin sashin HTML, zaku iya amfani da kadarorin-matsayin baya a cikin CSS. Kuna iya saita ƙimar "cibiyar tsakiya" zuwa tsakiyar hoton a kwance da kuma a tsaye. Hakanan, idan kuna son hoton ya sake maimaitawa a bango, zaku iya amfani da kayan "bayan-maimaita" tare da ƙimar "ba-maimaita ba."
A takaice, zuwa tsakiyar hotuna a cikin HTML, zaku iya amfani da kayan daidaita rubutu a cikin CSS, ƙirƙirar akwati tare da takamaiman salon CSS, ko amfani da kadarorin matsayin baya don hotunan bango. Wadannan zaɓuɓɓuka za su ba ka damar cimma sakamakon da ake so da kuma inganta bayyanar abubuwan da kake gani akan gidan yanar gizon ka.
A ƙarshe, sanya hotuna a cikin HTML aiki ne mai sauƙi wanda za'a iya cika ta amfani da kaddarorin da halaye masu dacewa. A cikin wannan labarin, mun bincika hanyoyi daban-daban don sanya hotuna a cikin HTML, kama daga yin amfani da sifa mai daidaitawa zuwa amfani da salon CSS.
Yana da mahimmanci a tuna cewa kowace hanya na iya samun ta fa'idodi da rashin amfani dangane da halin da ake ciki da takamaiman bukatun kowane aikin. Bugu da ƙari, dole ne a yi la'akari da dacewa da masu bincike daban-daban da nau'ikan HTML.
Lokacin sanya hotuna a tsakiya, yana da mahimmanci don samun kyakkyawar fahimtar alamun HTML da halaye, da kuma tushen ƙira da shimfidawa. Hakanan, yana da mahimmanci a sami ayyuka masu kyau haɓaka yanar gizo don tabbatar da ingancin shafin da aiki.
Ka tuna cewa haɗa hotuna kaɗan ne kawai na ƙwarewa da dabarun da ake buƙata don ƙirƙira da ƙira gidajen yanar gizo kwararru. Ci gaba da koyo da gwaji tare da HTML da CSS zai ba ku damar ƙware waɗannan kayan aikin da faɗaɗa ilimin ku a fagen ci gaban yanar gizo.
Muna fatan wannan labarin ya taimaka wajen fahimtar yadda ake tsakiyar hotuna a cikin HTML kuma ya ba ku ƙwaƙƙwaran tushe don ƙara bincika wannan batu. Yana da ban sha'awa koyaushe don ganin yadda abubuwan gani ke haɗawa cikin jituwa cikin gidan yanar gizon, kuma ba da izinin sanya hoto ba shakka fasaha ce mai mahimmanci don cimmawa. Sa'a a cikin ayyukan HTML na gaba kuma ku ci gaba da koyo!
Ni Sebastián Vidal, injiniyan kwamfuta mai sha'awar fasaha da DIY. Bugu da ƙari, ni ne mahaliccin tecnobits.com, inda nake raba koyaswar don sa fasaha ta fi dacewa da fahimtar kowa ga kowa.