Kako Smanjiti Sliku U Html-u

Sadržaj:

Kako Smanjiti Sliku U Html-u
Kako Smanjiti Sliku U Html-u

Video: Kako Smanjiti Sliku U Html-u

Video: Kako Smanjiti Sliku U Html-u
Video: HTML Tutorijali - 17 - Ubacivanje Slike u HTML 2024, Studeni
Anonim

U jeziku za označavanje hiperteksta (HTML), posebna naredba "tag" koristi se za prikaz slike na stranici. Ova se oznaka naziva img i sadrži skup varijabli - "atributi". Pomoću atributa možete odrediti sve aspekte prikaza slike na stranici s hipertekstom, uključujući njezine dimenzije. Međutim, ovo nije jedini način za rješavanje problema - veličinu slike možete smanjiti i pomoću Cascading Style Sheets (CSS).

Kako smanjiti sliku u html-u
Kako smanjiti sliku u html-u

Upute

Korak 1

Postavite atribute visine i širine u oznaku odgovornu za prikaz željene slike. Postavite prvu na okomitu veličinu slike, a drugu vodoravno. Postavite oba broja u pikselima, ali ovdje nije potrebno navesti jedinice - px. Prilikom izračunavanja potrebnih vrijednosti za ove atribute, obratite pažnju na poštivanje proporcija smanjenja slike, jer će u protivnom biti prikazana u iskrivljenom obliku. Na primjer, da biste na stranicu stavili prepolovljenu sliku iz datoteke nazvane SomePic.jpg, čije su početne dimenzije 500 x 300 piksela, oznaka se može izvršiti sljedećom naredbom:

Korak 2

Možete postaviti proporcionalno smanjenje izvornih dimenzija slike u postocima. Da biste to učinili, upotrijebite samo atribut visine bez navođenja širine i dodajte znak posto nakon navođenja broja koji definira veličinu. Na primjer, možete postići isti efekt kao u primjeru iz prethodnog koraka s oznakom napisanom u ovom obliku:

3. korak

Ako želite odrediti veličinu slike pomoću opisa stilova, upotrijebite isto ime oznake - img - i atribute - širinu i visinu. U tom se slučaju uvijek moraju navesti mjerne jedinice - px, pt ili%. Da biste postavili prepolovljenje veličine apsolutno svih slika na stranici, u blok opisa stila stavite sljedeći unos: img {visina: 50%;} Ako trebate smanjiti veličinu samo jedne slike, dodajte dodatni atribut id svojoj oznaci i dodijelite joj jedan jedinstveni za slike vrijednosti ove stranice - na primjer, PicOne: dodajte istu vrijednost u zapis stila, odvajajući je "hash" # od naziva oznake. Kompletni opis stila u ovom slučaju može izgledati ovako: img # OnePic {visina: 50%;}

Preporučeni: