Jak Zmenšit Obrázek V Html

Obsah:

Jak Zmenšit Obrázek V Html
Jak Zmenšit Obrázek V Html

Video: Jak Zmenšit Obrázek V Html

Video: Jak Zmenšit Obrázek V Html
Video: HTML - kurz - obrazky 2024, Duben
Anonim

V hypertextovém značkovacím jazyce (HTML) se pro zobrazení obrázku na stránce používá speciální příkaz „tag“. Tato značka se označuje jako img a obsahuje sadu proměnných - „atributy“. Pomocí atributů můžete určit všechny aspekty zobrazení obrázku na hypertextové stránce, včetně jeho dimenzí. To však není jediný způsob, jak problém vyřešit - můžete také zmenšit velikost obrázku pomocí kaskádových stylů (CSS).

Jak zmenšit obrázek v html
Jak zmenšit obrázek v html

Instrukce

Krok 1

Umístěte atributy výšky a šířky do značky odpovědné za zobrazení požadovaného obrázku. První nastavte na svislou velikost obrázku a druhý vodorovně. Nastavte obě čísla v pixelech, ale není třeba zde označovat jednotky - px. Při výpočtu potřebných hodnot pro tyto atributy dávejte pozor na dodržování proporcí redukce obrazu, jinak bude zobrazen ve zkreslené podobě. Například pro vložení rozpůleného obrázku na stránku ze souboru s názvem SomePic.jpg, jehož počáteční rozměry jsou 500 x 300 pixelů, lze značku provést pomocí následujícího příkazu:

Krok 2

Můžete nastavit proporcionální zmenšení původních rozměrů obrazu v procentech. Chcete-li to provést, použijte pouze atribut výšky bez zadání šířky a po zadání čísla definujícího velikost přidejte znak procenta. Například můžete dosáhnout stejného efektu jako v příkladu z předchozího kroku se značkou napsanou v tomto formuláři:

Krok 3

Chcete-li určit velikost obrázku pomocí popisu stylů, použijte stejný název značky - img - a atributy - šířka a výška. V tomto případě musí být vždy uvedeny měrné jednotky - px, pt nebo%. Chcete-li nastavit polovinu velikosti absolutně všech obrázků na stránce, vložte do bloku popisu stylu následující položku: img {výška: 50%;} Pokud potřebujete zmenšit velikost pouze jednoho obrázku, přidejte další atribut id ke své značce a přiřaďte jí jednu jedinečnou pro obrázky této hodnoty stránky - například PicOne: Přidejte stejnou hodnotu do záznamu stylu a oddělte ji „hash“# od názvu značky. Kompletní popis stylu může v tomto případě vypadat takto: img # OnePic {výška: 50%;}

Doporučuje: