Ar norite įterpti vaizdą į savo tinklalapį, bet jūs nežinote, kaip pakoreguoti jo dydį, kad jis atitiktų dizainą? Ar norite sužinoti, kaip naudoti HTML žymas ir atributus vaizdo pločiui ir aukščiui keisti? Ar žinote kiekvieno metodo privalumus ir trūkumus? Jei atsakymas yra teigiamas, šis straipsnis skirtas jums.
Šiame straipsnyje Mes išmokysime jus, kaip koreguoti vaizdo dydį html, naudojant įvairias parinktis ir išteklius, kurie leis sukurti patrauklius ir optimizuotus savo svetainės vaizdus. Taip pat parodysime kiekvienos parinkties privalumus ir trūkumus, taip pat keletą patarimų ir gerosios praktikos, kaip pagerinti jūsų darbą.
Kas yra vaizdas html ir kaip jį įterpti
Vaizdas html yra elementas, leidžiantis rodyti vizualinis objekto vaizdas, asmuo, kraštovaizdis ar dar kas nors. Norėdami įterpti vaizdą į html, naudojama žyma , kuri yra tuščia žyma, t.y. kuri neturi uždarymo.
Etiketė turi keletą atributų, leidžiančių nurodyti vaizdo informaciją ir charakteristikas. Svarbiausi yra:
- src: yra atributas, nurodantis vaizdo failo kelią arba adresą. Tai gali būti santykinis kelias (toje pačioje svetainėje) arba absoliutus kelias (kitoje svetainėje). Pavyzdžiui: arba .
- alt: yra atributas, nurodantis alternatyvų vaizdo tekstą, ty tekstą, kuris rodomas, kai vaizdo negalima įkelti arba naudojamas ekrano skaitytuvas. Tai yra privalomas atributas ir turi apibūdinti vaizdo turinį arba funkciją. Pavyzdžiui: .
- pavadinimas: yra atributas, nurodantis vaizdo pavadinimą, tai yra tekstas, rodomas užvedus žymeklį apie vaizdą. Tai yra neprivalomas atributas ir gali skirtis nuo alternatyvaus teksto. Pavyzdžiui: .
Kaip reguliuoti dydį naudojant pločio ir aukščio atributus
Vienas iš paprasčiausių būdų pakoreguoti vaizdo dydį html yra naudoti pločio ir aukščio atributus), kurios leidžia nurodyti vaizdo plotį ir aukštį pikseliais. Pavyzdžiui:
Šios savybės turi tam tikrų privalumų ir trūkumų:
- Privalumai:
- Jas lengva naudoti ir nereikia jokių papildomų žinių.
- Jie leidžia rezervuoti reikiamą vietą vaizdui prieš jį įkeliant, o tai neleidžia puslapiui šokinėti ar keistis įkeliant.
- suteikia jums galimybę pritaikyti vaizdo dydį prie dizaino puslapio nekeičiant pradinio failo.
- Trūkumai:
- Jie gali iškraipyti vaizdo kraštinių santykį arba kokybę, jei naudojamos kitos nei pradinio dydžio reikšmės.
- Tai neleidžia koreguoti vaizdo dydžio pagal vartotojo ekrano ar įrenginio dydį.
- Jie neleidžia taikyti efektų arba papildomi vaizdo stiliai.
Kaip pakeisti vaizdo dydį html naudojant CSS
Kitas būdas pažangesnis ir lankstesnis Norėdami koreguoti vaizdo dydį HTML, reikia naudoti CSS (pakopinių stilių lapus), kuri yra kalba, leidžianti apibrėžti ir taikyti HTML elementų stilius. Norėdami naudoti CSS, galite naudoti žymą html dokumento viduje – išorinis failas su plėtiniu .css. Pavyzdžiui:
img { width: 500px; height: 600px; } arba
CSS naudojimas turi tam tikrų privalumų ir trūkumų:
- Privalumai:
- Leidžia proporcingai reguliuoti vaizdo dydį, naudojant objekto pritaikymo savybę arba calc() funkciją.
- Pakoreguosime vaizdo dydį priklausomai nuo vartotojo ekrano ar įrenginio dydžio, naudojant santykinius vienetus (%, em, vw, vh) arba medijos užklausas.
- Vaizdui gali būti taikomi papildomi efektai arba stiliai, pvz., kraštinės, šešėliai, filtrai ar transformacijos.
- Trūkumai:
- Reikia daugiau žinių ir CSS kalbos mokėjimo.
- Gali sukelti konfliktus ar neatitikimus su kitais puslapiui ar vaizdui pritaikytais stiliais.
- Tai gali turėti įtakos našumui arba puslapio įkėlimo greičiui, jei naudojama per daug stilių ar efektų.
Kaip sureguliuoti dydį naudojant išorinę programą
Trečias koregavimo variantas vaizdo dydis html yra naudoti išorinę programą, kuri leidžia pakeisti vaizdo failo dydį prieš įterpiant jį į puslapį. Kai kurios iš šių programų yra:
- GIMP: yra nemokama atvirojo kodo programa, leidžianti profesionaliai redaguoti ir manipuliuoti vaizdais. Naudodami GIMP galite pakeisti vaizdo dydį Naudojant parinktį „Mastelio vaizdas“. iš meniu „Vaizdas“. Taip pat galite optimizuoti vaizdo svorį ir kokybę naudodami meniu „Failas“ parinktį „Eksportuoti kaip“. GIMP galite atsisiųsti iš oficialios svetainės.
- „Photoshop“: yra mokama ir nukreipimo programa, leidžianti kurti ir redaguoti vaizdus pažangiu būdu. Naudodami „Photoshop“ galite pakeisti vaizdo dydį naudodami meniu „Vaizdas“ esančią parinktį „Vaizdo dydis“. Taip pat galite optimizuoti svorį ir vaizdo kokybę naudodami parinktį „Išsaugoti žiniatinklyje“. iš meniu „Failas“. „Photoshop“ galite atsisiųsti iš oficialios svetainės.
- Internetinis vaizdo dydžio keitiklis: yra nemokamas internetinis įrankis, leidžiantis keisti vaizdo dydį neįdiegiant jokios programos. Naudodami „Online Image Resizer“ galite įkelti vaizdą iš savo kompiuterio arba iš URL, pasirinkite norimą plotį ir aukštį ir atsisiųskite modifikuotą vaizdą. „Online Image Resizer“ galite pasiekti oficialioje svetainėje.
Sureguliuokite vaizdą taip, kaip norite
Šiame straipsnyje parodėme, kaip koreguoti dydį vaizdo HTML formatu, naudojant įvairias parinktis ir išteklius, kurie leis sukurti patrauklius ir optimizuotus jūsų svetainės vaizdus. Mes taip pat parodėme kiekvienos parinkties privalumus ir trūkumus, taip pat kai kurie patarimai ir geroji praktika pagerinti savo darbą.
Tikimės, kad šis straipsnis jums buvo naudingas ir esate raginami išbandyti šias parinktis ir išteklius, kad galėtumėte pakoreguoti vaizdo dydį HTML formatu. Atminkite, kad svarbiausia yra pasirinkti variantas, kuris geriausiai atitinka jūsų poreikius ir tikslus.
Jei jums patiko šis straipsnis, pasidalykite juo su draugais. O jei norite sužinoti daugiau patarimų ir gudrybių apie html ir kitas programas, apsilankykite mūsų svetainėje. Iki!