I hypertext markup language (HTML) används ett specialkommando "tag" för att visa en bild på en sida. Denna tagg kallas img och innehåller en uppsättning variabler - "attribut". Med hjälp av attribut kan du bestämma alla aspekter av visningen av en bild på en hypertext-sida, inklusive dess dimensioner. Detta är dock inte det enda sättet att lösa problemet - du kan också minska storleken på bilden med Cascading Style Sheets (CSS).
Instruktioner
Steg 1
Placera attributen höjd och bredd i taggen som ansvarar för att visa önskad bild. Ställ in den första på bildens vertikala storlek och den andra horisontellt. Ställ in båda siffrorna i pixlar, men det finns inget behov av att ange enheter - px - här. När du beräknar de nödvändiga värdena för dessa attribut, var uppmärksam på att proportionerna för reduktion av bilden följs, annars visas den i en förvrängd form. Till exempel, för att på en sida lägga en halverad bild från en fil som heter SomePic.jpg, vars ursprungliga dimensioner är 500 x 300 pixlar, kan taggen göras med följande kommando:
Steg 2
Du kan ställa in den proportionella minskningen av originalbildens dimensioner i procent. För att göra detta använder du bara höjdattributet utan att ange bredd och lägger till ett procentsignal efter att du har angett det storlek som definierar antalet. Du kan till exempel uppnå samma effekt som i exemplet från föregående steg med en tagg skriven i denna form:
Steg 3
Om du vill ange bildens storlek med hjälp av beskrivningen av stilar använder du samma taggnamn - img - och attributen - bredd och höjd. I detta fall måste alltid måttenheterna - px, pt eller% - anges. För att ställa in halveringen av storleken på absolut alla bilder på sidan, placera följande post i stilbeskrivningsblocket: bild {höjd: 50%;} Om du bara behöver minska storleken på en bild, lägg till ett extra id-attribut till dess tagg och tilldela den en unik för bilderna med det här sidvärdet - till exempel PicOne: Lägg till samma värde i stilposten, separera den med ett "hash" # från taggnamnet. Den fullständiga stilbeskrivningen i detta fall kan se ut så här: img # OnePic {höjd: 50%;}
