Kuidas HTML-is Pilti Vähendada

Sisukord:

Kuidas HTML-is Pilti Vähendada
Kuidas HTML-is Pilti Vähendada

Video: Kuidas HTML-is Pilti Vähendada

Video: Kuidas HTML-is Pilti Vähendada
Video: Пробельные символы в HTML и как их увидеть: перенос строки, пробел и табуляция в HTML 2024, Aprill
Anonim

Hüperteksti märgistuskeeles (HTML) kasutatakse lehel pildi kuvamiseks spetsiaalset käsku "silt". Sellele sildile viidatakse kui img-le ja see sisaldab muutujate komplekti - "atribuute". Atribuutide abil saate määrata hüperteksti lehel pildi kuvamise kõik aspektid, sealhulgas selle mõõtmed. Kuid see pole ainus viis probleemi lahendada - saate ka pildi suurust vähendada kaskaadstiilide (CSS) abil.

Kuidas HTML-is pilti vähendada
Kuidas HTML-is pilti vähendada

Juhised

Samm 1

Asetage kõrguse ja laiuse atribuudid sildile, mis vastutab soovitud pildi kuvamise eest. Määrake esimene pildi vertikaalsuuruseks ja teine horisontaalselt. Määra mõlemad numbrid pikslites, kuid siin pole vaja märkida ühikuid - px. Nende atribuutide jaoks vajalike väärtuste arvutamisel pöörake tähelepanu pildi vähendamise proportsioonide järgimisele, vastasel juhul kuvatakse see moonutatud kujul. Näiteks, kui soovite lehele panna poolitatud pildi failist nimega SomePic.jpg, mille esialgsed mõõtmed on 500 x 300 pikslit, saab märgendi teha järgmise käsuga:

2. samm

Saate määrata originaalpildi mõõtmete proportsionaalse vähendamise protsentides. Selleks kasutage ainult atribuuti height (kõrgus) ilma laiust täpsustamata ja lisage pärast suurust määrava numbri määramist protsendimärk. Näiteks saate sellisel kujul kirjutatud märgendiga saavutada sama efekti nagu eelmises etapis toodud näites:

3. samm

Kui soovite stiilide kirjelduse abil määrata pildi suuruse, kasutage sama sildi nime - img - ja atribuute - laius ja kõrgus. Sellisel juhul tuleb alati täpsustada mõõtühikud - px, pt või%. Lehe absoluutselt kõigi piltide suuruse poolitamise määramiseks sisestage stiilikirjelduse plokki järgmine kirje: img {height: 50%;} Kui peate vähendama ainult ühe pildi suurust, lisage täiendav atribuut id selle sildile ja määrake sellele selle leheväärtuse piltide jaoks üks ainulaadne - näiteks PicOne: lisage stiilikirjele sama väärtus, eraldades selle sildi nimest "hash" # -ga. Stiili täielik kirjeldus võib sel juhul välja näha järgmine: img # OnePic {kõrgus: 50%;}

Soovitan: