HTML nám umožňuje používat obrázky na webových stránkách a učinit je přitažlivějšími použitím různých stylů. Pokud potřebujete změnit poměr stran obrázku nebo váš obrázek neodpovídá rozložení vaší webové stránky, můžete změnit jeho velikost. K tomuto účelu můžete využít „ šířka ' a ' výška “ vlastnosti na “ img ” tag. Tyto hodnoty vlastností lze snadno nastavit v pixelech CSS.
V této příručce se naučíte metodu změny velikosti obrázku v HTML.
Před spuštěním je nutné přidat obrázek do souboru HTML, na kterém bude provedena operace změny velikosti obrázku.
Jak vložit obrázek do HTML?
Chcete-li přidat obrázek do HTML, použijte následující syntaxi:
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' >
Popis výše uvedené syntaxe je popsán níže. ' img Značka ” používá dva atributy:
-
- 'src' se používá k poskytnutí cesty (URL) obrázku.
- 'všechno' se používá k poskytnutí alternativního textu, pokud se obrázek nezobrazuje.
HTML
Níže uvedený kód představuje dva divy. V první části jsme přidali nadpis do horního středu naší webové stránky jako „ Velikost obrázku v HTML ” pomocí tagu
:
< div >
< centrum >
< h1 > Velikost obrázku v HTML h1 >
centrum >
div >
Druhý div je přidán s třídou s názvem „ kontejner ” a pro znázornění obrázku uprostřed jsme použili značku
. Uvnitř středu napište níže uvedený kód pro přidání obrázku:
< div třída = 'kontejner' >
< centrum >
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' >
centrum >
div >
Vybraný obrázek s „ 640*437 ” poměr stran bude vypadat takto:
V další části bude demonstrován způsob změny velikosti obrázku.
Jak změnit velikost obrázku v HTML?
Velikost obrázku můžete upravit nebo změnit jeho velikost pomocí „ šířka ' a ' výška ” pro nastavení jeho šířky a výšky.
Nyní nastavíme hodnotu šířky přidaného obrázku jako „ 300 “ a podívejte se, jak to funguje:
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' šířka = '300' >
Je vidět, že šířka obrázku byla změněna a jeho velikost byla úspěšně změněna:
Kromě šířky „ výška Atribut ” lze také použít pro stejný účel. Chcete-li zobrazit rozdíl velikosti, nastavte „ 550 ” pixelů jako výška obrázku:
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' šířka = '300' výška = '550' >
Můžete jasně pozorovat rozdíl ve velikosti obrázku:
Takto se ke změně velikosti obrázku používají atributy width a height.
Závěr
V HTML, „ výška ' a ' šířka Atributy ” se používají pro změnu velikosti obrázku. Nastavením hodnot těchto atributů můžete změnit výchozí poměr stran přidaného obrázku. V důsledku toho je vidět jasný rozdíl s ohledem na velikost obrázku. Tento blog demonstroval metodu použití vlastností výšky a váhy pro změnu velikosti obrázků v HTML.
Druhý div je přidán s třídou s názvem „ kontejner ” a pro znázornění obrázku uprostřed jsme použili značku
< centrum >
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' >
centrum >
div >
Vybraný obrázek s „ 640*437 ” poměr stran bude vypadat takto:
V další části bude demonstrován způsob změny velikosti obrázku.
Jak změnit velikost obrázku v HTML?
Velikost obrázku můžete upravit nebo změnit jeho velikost pomocí „ šířka ' a ' výška ” pro nastavení jeho šířky a výšky.
Nyní nastavíme hodnotu šířky přidaného obrázku jako „ 300 “ a podívejte se, jak to funguje:
< img src = 'images/butterfly.jpg' všechno = 'alternativní text' šířka = '300' >
Je vidět, že šířka obrázku byla změněna a jeho velikost byla úspěšně změněna:
Kromě šířky „ výška Atribut ” lze také použít pro stejný účel. Chcete-li zobrazit rozdíl velikosti, nastavte „ 550 ” pixelů jako výška obrázku:
Můžete jasně pozorovat rozdíl ve velikosti obrázku:
Takto se ke změně velikosti obrázku používají atributy width a height.
Závěr
V HTML, „ výška ' a ' šířka Atributy ” se používají pro změnu velikosti obrázku. Nastavením hodnot těchto atributů můžete změnit výchozí poměr stran přidaného obrázku. V důsledku toho je vidět jasný rozdíl s ohledem na velikost obrázku. Tento blog demonstroval metodu použití vlastností výšky a váhy pro změnu velikosti obrázků v HTML.