HTML nám umožňuje používať obrázky na webových stránkach a urobiť ich príťažlivejšími použitím rôznych štýlov. Ak potrebujete zmeniť pomer strán obrázka alebo váš obrázok nezodpovedá rozloženiu vašej webovej stránky, môžete zmeniť jeho veľkosť. Na tento účel môžete použiť „ šírka “ a „ výška vlastnosti na stránke img ” tag. Tieto hodnoty vlastností možno jednoducho nastaviť v pixeloch CSS.

V tejto príručke sa naučíte spôsob zmeny veľkosti obrázka v HTML.

Pred spustením je potrebné pridať obrázok do súboru HTML, na ktorom sa vykoná operácia zmeny veľkosti obrázka.

Ako vložiť obrázok do HTML?

Ak chcete pridať obrázok do HTML, použite nasledujúcu syntax:

Opis vyššie uvedenej syntaxe je opísaný nižšie. ' img Značka ” používa dva atribúty:

• • 'src' sa používa na poskytnutie cesty (URL) k obrázku.
  • 'všetko' sa používa na poskytnutie alternatívneho textu, ak sa obrázok nezobrazuje.

HTML

Nižšie uvedený kód predstavuje dve divy. V prvej časti sme pridali nadpis v strede hore na našu webovú stránku ako „ Veľkosť obrázka v HTML ” pomocou značky

:

< div >
< stred >
< h1 > Veľkosť obrazu v HTML h1 >
stred >
div >

Druhý div je pridaný s triedou s názvom „ kontajner ” a na znázornenie obrázku v strede sme použili značku

. Do stredu napíšte nižšie uvedený kód na pridanie obrázka:

< div trieda = 'kontajner' >
< stred >
< img src = 'images/butterfly.jpg' všetko = 'alternatívny text' >
stred >
div >

Vybratý obrázok s „ 640*437 ” pomer strán bude vyzerať takto:

Nasledujúca časť ukáže spôsob zmeny veľkosti obrázka.

Ako zmeniť veľkosť obrázka v HTML?

Veľkosť obrázka môžete prispôsobiť alebo zmeniť jeho veľkosť pomocou „ šírka “ a „ výška ” na nastavenie jeho šírky a výšky.

Teraz nastavme hodnotu šírky pridaného obrázka ako „ 300 “ a uvidíte, ako to funguje:

< img src = 'images/butterfly.jpg' všetko = 'alternatívny text' šírka = '300' >

Je vidieť, že šírka obrázka sa zmenila a jeho veľkosť sa úspešne zmenila:

Okrem šírky „ výška Na rovnaký účel možno použiť aj atribút ”. Ak chcete zobraziť rozdiel vo veľkosti, nastavte „ 550 ” pixelov ako výška obrázka:

< img src = 'images/butterfly.jpg' všetko = 'alternatívny text' šírka = '300' výška = '550' >

Môžete jasne pozorovať rozdiel vo veľkosti obrázka:

Takto sa na zmenu veľkosti obrázka používajú atribúty šírka a výška.

Záver

V HTML je „ výška “ a „ šírka ” atribúty sa používajú na zmenu veľkosti obrázka. Nastavením hodnôt týchto atribútov môžete zmeniť predvolený pomer strán pridaného obrázka. Výsledkom je jasný rozdiel vo veľkosti obrázka. Tento blog demonštroval metódu použitia vlastností výšky a hmotnosti na zmenu veľkosti obrázkov v HTML.