Hiperteksto žymėjimo kalba (HTML) speciali komanda „tag“naudojama vaizdui rodyti puslapyje. Ši žyma vadinama img ir joje yra kintamųjų rinkinys - „atributai“. Naudodamiesi atributais, galite nustatyti visus paveikslėlio atvaizdavimo aspektus hiperteksto puslapyje, įskaitant jo matmenis. Tačiau tai nėra vienintelis būdas išspręsti problemą - taip pat galite sumažinti vaizdo dydį naudodami kaskadinius stiliaus lapus (CSS).
Nurodymai
1 žingsnis
Įdėkite aukščio ir pločio atributus į žymą, atsakingą už norimo vaizdo rodymą. Pirmąjį nustatykite vertikalų paveikslėlio dydį, o antrąjį - horizontaliai. Nustatykite abu skaičius pikseliais, bet čia nereikia nurodyti vienetų - px. Skaičiuodami būtinas šių atributų reikšmes, atkreipkite dėmesį į paveikslėlio sumažinimo proporcijų laikymąsi, kitaip jis bus rodomas iškreiptai. Pvz., Norėdami įdėti į puslapį perpus sumažintą paveikslėlį iš failo, vadinamo „SomePic.jpg“, kurio pradiniai matmenys yra 500 x 300 pikselių, žymą galima atlikti naudojant šią komandą:
2 žingsnis
Galite nustatyti proporcingą originalaus vaizdo matmenų sumažinimą procentais. Norėdami tai padaryti, nenurodydami pločio, naudokite tik aukščio atributą, o nurodę dydį apibrėžiantį skaičių pridėkite ženklą procentais. Pvz., Galite pasiekti tą patį efektą, kaip ir ankstesnio veiksmo pavyzdyje, naudodami žymą, parašytą šioje formoje:
3 žingsnis
Jei norite nurodyti atvaizdo dydį naudodami stilių aprašymą, naudokite tą patį žymos pavadinimą - img - ir atributus - plotis ir aukštis. Tokiu atveju matavimo vienetai - px, pt arba% - visada turi būti nurodyti. Norėdami nustatyti, kad perpus sumažėtų visų puslapio vaizdų dydis, stiliaus aprašymo laukelyje įdėkite šį įrašą: img {height: 50%;} Jei reikia sumažinti tik vieno vaizdo dydį, pridėkite papildomą ID atributą prie savo žymos ir priskirkite jai vieną unikalų šios puslapio vertės vaizdams - pavyzdžiui, „PicOne“: pridėkite tą pačią reikšmę prie stiliaus įrašo, atskirdami ją „hash“# nuo žymos pavadinimo. Visas stiliaus aprašymas šiuo atveju gali atrodyti taip: img # OnePic {height: 50%;}
