Kako prilagoditi velikost slike v html na različne načine

širina in višina v html

Ali želite vstaviti sliko na svojo spletno stran, vendar ne veste, kako prilagoditi njegovo velikost, da bo ustrezala dizajnu? Se želite naučiti uporabljati oznake in atribute HTML za spreminjanje širine in višine slike? Ali poznate prednosti in slabosti vsake metode? Če je odgovor pritrdilen, je ta članek za vas.

V tem članku Naučili vas bomo, kako prilagoditi velikost slike v html, z uporabo različnih možnosti in virov, ki vam bodo omogočili ustvarjanje privlačnih in optimiziranih slik za vaše spletno mesto. Pokazali vam bomo tudi prednosti in slabosti vsake možnosti ter nekaj nasvetov in dobrih praks za izboljšanje vašega dela.

Kaj je slika v html in kako jo vstaviti

Kodiranje strani HTML

Slika v html je element, ki omogoča prikaz vizualna predstavitev predmeta, osebo, pokrajino ali karkoli drugega. Za vstavljanje slike v html se uporablja oznaka , ki je prazna oznaka, tj. ki nima zaključka.

Oznaka ima več atributov, ki vam omogočajo, da določite informacije in značilnosti slike. Najpomembnejši so:

  • src: je atribut, ki označuje pot ali naslov slikovne datoteke. Lahko je relativna pot (znotraj istega spletnega mesta) ali absolutne poti (na drugem spletnem mestu). Na primer: bodisi .
  • alt: je atribut, ki označuje alternativno besedilo slike, to je besedilo, ki se prikaže, ko slike ni mogoče naložiti ali je uporabljen bralnik zaslona. Je obvezen atribut in mora opisovati vsebino ali funkcijo slike. Na primer:.
  • Naslov: je atribut, ki označuje naslov slike, to je besedilo, prikazano, ko premaknete kazalec o podobi. Je neobvezen atribut in se lahko razlikuje od nadomestnega besedila. Na primer: .

Kako prilagoditi velikost z atributoma širine in višine

kodna tabela thml

Eden najlažjih načinov prilagajanja velikosti slike v html je uporaba atributov širine in višine), ki vam omogočajo, da določite širino in višino slike v slikovnih pikah. Na primer:

Ti atributi imajo nekaj prednosti in slabosti:

  • Prednosti:
    • So enostavni za uporabo in ne zahtevajo dodatnega znanja.
    • Omogočajo vam, da rezervirate potreben prostor za sliko, preden jo naložite, kar preprečuje skakanje ali spreminjanje strani med nalaganjem.
    • vam daje možnost prilagodite velikost slike dizajnu strani, ne da bi morali spremeniti izvirno datoteko.
  • Slabosti:
    • Lahko popačijo razmerje stranic ali kakovost slike, če so uporabljene vrednosti, ki niso izvirne velikosti.
    • Ne omogoča prilagajanja velikosti slike glede na velikost uporabnikovega zaslona ali naprave.
    • Ne omogočajo uporabe učinkov ali dodatne sloge za sliko.

Kako spremeniti velikost slike v html s pomočjo CSS

Računalniški zaslon s html

Še en način bolj napreden in prilagodljiv Če želite prilagoditi velikost slike v HTML, uporabite CSS (Cascading Style Sheets), ki je jezik, ki omogoča definiranje in uporabo slogov za elemente HTML. Za uporabo CSS lahko uporabite oznako znotraj dokumenta html zunanja datoteka s pripono .css. Na primer:

img { width: 500px; height: 600px; } bodisi

Uporaba CSS ima nekaj prednosti in slabosti:

  • Prednosti:
    • Omogoča sorazmerno prilagajanje velikosti slike z uporabo lastnosti prileganja objekta ali funkcije calc().
    • Prilagodimo velikost slike glede na velikost uporabnikovega zaslona ali naprave z uporabo relativnih enot (%, em, vw, vh) ali medijskih poizvedb.
    • Na sliko lahko uporabite dodatne učinke ali sloge, kot so obrobe, sence, filtri ali transformacije.
  • Slabosti:
    • Zahteva večje znanje in obvladovanje jezika CSS.
    • Lahko povzroči konflikte ali nedoslednosti z drugimi slogi, uporabljenimi na strani ali sliki.
    • Če je uporabljenih preveč slogov ali učinkov, lahko vpliva na zmogljivost ali hitrost nalaganja strani.

Kako prilagoditi velikost z zunanjim programom

Jezik HTML v tabeli

Tretja možnost prilagoditve velikost slike v html je uporaba zunanjega programa, ki vam omogoča spreminjanje velikosti slikovne datoteke, preden jo vstavite na stran. Nekateri od teh programov so:

  • GIMP: je brezplačen in odprtokodni program, ki vam omogoča profesionalno urejanje in obdelavo slik. Z GIMP lahko spremenite velikost slike Uporaba možnosti »Prilagodi sliko«. iz menija »Slika«. Prav tako lahko optimizirate težo in kakovost slike z možnostjo »Izvozi kot« v meniju »Datoteka«. GIMP lahko prenesete z uradne spletne strani.
  • Photoshop: je plačljiv in referenčni program, ki vam omogoča ustvarjanje in urejanje slik na napreden način. S Photoshopom lahko spremenite velikost slike z možnostjo »Velikost slike« v meniju »Slika«. Optimizirate lahko tudi težo in kakovost slike z uporabo možnosti »Shrani za splet«. iz menija »Datoteka«. Photoshop lahko prenesete z uradne spletne strani.
  • Spletni spreminjalec velikosti slik: je brezplačno spletno orodje, ki vam omogoča spreminjanje velikosti slike, ne da bi morali namestiti kakršen koli program. S programom Online Image Resizer lahko naložite sliko iz računalnika ali z naslova URL, izberite želeno širino in višino ter prenesite spremenjeno sliko. Do Online Image Resizer lahko dostopate z uradne spletne strani.

Prilagodite sliko tako, kot želite

koda jezika html

V tem članku pokazali smo vam, kako prilagoditi velikost slike v HTML z uporabo različnih možnosti in virov, ki vam bodo omogočili ustvarjanje privlačnih in optimiziranih slik za vaše spletno mesto. Pokazali smo vam tudi prednosti in slabosti vsake možnosti, kot tudi nekaj nasvetov in dobrih praks izboljšati svoje delo.

Upamo, da vam je bil ta članek koristen in da vas spodbujamo, da preizkusite te možnosti in vire za prilagoditev velikosti slike v HTML. Ne pozabite, da je najpomembnejša izbira možnost, ki najbolje ustreza vašim potrebam in ciljem.

Če vam je bil ta članek všeč, ga delite s prijatelji. In če želite izvedeti več nasvetov in trikov o html in drugih aplikacijah, obiščite našo spletno stran. Se vidiva!


Pustite svoj komentar

Vaš e-naslov ne bo objavljen. Obvezna polja so označena z *

*

*

  1. Za podatke odgovoren: Miguel Ángel Gatón
  2. Namen podatkov: Nadzor neželene pošte, upravljanje komentarjev.
  3. Legitimacija: Vaše soglasje
  4. Sporočanje podatkov: Podatki se ne bodo posredovali tretjim osebam, razen po zakonski obveznosti.
  5. Shranjevanje podatkov: Zbirka podatkov, ki jo gosti Occentus Networks (EU)
  6. Pravice: Kadar koli lahko omejite, obnovite in izbrišete svoje podatke.