Kaip įvairiais būdais koreguoti vaizdo dydį html formatu

plotis ir aukštis html

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

HTML puslapio kodavimas

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

thml kodų lentelė

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

Kompiuterio ekranas su html

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ą

HTML kalba lentelėje

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

html kalbos kodas

Š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!


Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.