Ako Zmenšiť Obrázok V Html

Obsah:

Ako Zmenšiť Obrázok V Html
Ako Zmenšiť Obrázok V Html

Video: Ako Zmenšiť Obrázok V Html

Video: Ako Zmenšiť Obrázok V Html
Video: Navod ako zmenšiť fokty 2024, Apríl
Anonim

V jazyku hypertextového značkovania (HTML) sa na zobrazenie obrázka na stránke používa špeciálny príkaz „značka“. Táto značka sa označuje ako img a obsahuje množinu premenných - „atribútov“. Pomocou atribútov môžete určiť všetky aspekty zobrazenia obrázka na hypertextovej stránke vrátane jeho rozmerov. Nie je to však jediný spôsob riešenia problému - môžete tiež zmenšiť veľkosť obrázka pomocou kaskádových štýlov (CSS).

Ako zmenšiť obrázok v html
Ako zmenšiť obrázok v html

Inštrukcie

Krok 1

Umiestnite atribúty výšky a šírky do značky zodpovednej za zobrazenie požadovaného obrázka. Prvý nastavte na zvislú veľkosť obrázka a druhý vodorovne. Nastavte obidve čísla v pixeloch, ale nie je potrebné tu označovať jednotky - px. Pri výpočte potrebných hodnôt pre tieto atribúty venujte pozornosť dodržiavaniu proporcií redukcie obrázka, inak sa zobrazí v skreslenej podobe. Ak chcete napríklad na stránku vložiť rozpolený obrázok zo súboru s názvom SomePic.jpg, ktorého počiatočné rozmery sú 500 x 300 pixelov, značku je možné vykonať pomocou nasledujúceho príkazu:

Krok 2

Môžete nastaviť proporcionálne zníženie pôvodných rozmerov obrázka v percentách. Použijete na to iba atribút výšky bez zadania šírky a po zadaní čísla určujúceho veľkosť pridajte znak percenta. Rovnaký efekt ako v príklade z predchádzajúceho kroku môžete dosiahnuť napríklad štítkom napísaným v tomto tvare:

Krok 3

Ak chcete určiť veľkosť obrázka pomocou popisu štýlov, použite rovnaký názov značky - img - a atribúty - width a height. V takom prípade musia byť vždy určené jednotky merania - px, pt alebo%. Ak chcete nastaviť rozdelenie veľkosti všetkých obrázkov na polovicu na polovicu, vložte do bloku popisu štýlu nasledujúcu položku: img {height: 50%;} Ak potrebujete zmenšiť veľkosť iba jedného obrázka, pridajte ďalší atribút id. k svojej značke a priraďte jej jednu jedinečnú pre obrázky tejto hodnoty stránky - napríklad PicOne: Pridajte rovnakú hodnotu do záznamu štýlu a oddeľte ho „hash“# od názvu značky. Celý popis štýlu môže v tomto prípade vyzerať takto: img # OnePic {výška: 50%;}

Odporúča: