ჰიპერტექსტის ნიშნის ენაში (HTML) გამოიყენება სპეციალური ბრძანება "tag" გვერდზე გამოსახულების გამოსახატავად. ეს ნიშანი ეწოდება img და შეიცავს ცვლადების ერთობლიობას - "ატრიბუტებს". ატრიბუტების დახმარებით შეგიძლიათ განსაზღვროთ ჰიპერტექსტის გვერდზე გამოსახულების ყველა ასპექტი, მათი ზომების ჩათვლით. ამასთან, ეს არ არის პრობლემის გადაჭრის ერთადერთი გზა - ასევე შეგიძლიათ შეამციროთ გამოსახულების ზომა კასკადური სტილის ფურცლების (CSS) გამოყენებით.
ინსტრუქციები
Ნაბიჯი 1
განათავსეთ სიმაღლისა და სიგანის ატრიბუტები თეგში, რომელიც პასუხისმგებელია სასურველი სურათის ჩვენებაზე. დააყენეთ პირველი სურათის ვერტიკალური ზომაზე, ხოლო მეორე ჰორიზონტალურად. დააყენეთ ორივე რიცხვი პიქსელში, მაგრამ აქ საჭირო არ არის ერთეულების - px მითითება. ამ ატრიბუტებისთვის საჭირო მნიშვნელობების გაანგარიშებისას ყურადღება მიაქციეთ სურათის შემცირების პროპორციების დაცვას, წინააღმდეგ შემთხვევაში ის ნაჩვენები იქნება დამახინჯებული ფორმით. მაგალითად, გვერდზე რომ დააყენოთ განახლებული სურათი ფაილისგან SomePic.jpg, რომლის საწყისი ზომებია 500 300 პიქსელი, თეგის გაკეთება შესაძლებელია შემდეგი ბრძანებით:
ნაბიჯი 2
შეგიძლიათ დააყენოთ ორიგინალი სურათის პროპორციული შემცირება პროცენტებში. ამისათვის გამოიყენეთ მხოლოდ სიმაღლის ატრიბუტი სიგანის დაზუსტების გარეშე და დაამატეთ პროცენტის ნიშანი ზომის განმსაზღვრელი ნომრის მითითების შემდეგ. მაგალითად, თქვენ შეგიძლიათ მიაღწიოთ იგივე ეფექტს, როგორც წინა ნაბიჯის მაგალითში ამ ფორმით დაწერილი თეგით:
ნაბიჯი 3
თუ გსურთ მიუთითოთ სურათის ზომა სტილის აღწერის გამოყენებით, გამოიყენეთ იგივე თეგის სახელი - img - და ატრიბუტები - სიგანე და სიმაღლე. ამ შემთხვევაში, ყოველთვის უნდა იყოს მითითებული საზომი ერთეულები - px, pt ან%. გვერდზე აბსოლუტურად ყველა სურათის ზომის განახევრების დასაყენებლად, სტილის აღწერის ბლოკში განათავსეთ შემდეგი ჩანაწერი: img {სიმაღლე: 50%;} თუ საჭიროა მხოლოდ ერთი სურათის ზომის შემცირება, დაამატეთ დამატებითი ID ატრიბუტი მის ნიშანს და მიანიჭეთ მას ერთი უნიკალური გვერდი ამ გვერდის მნიშვნელობის სურათებისთვის - მაგალითად, PicOne: სტილის ჩანაწერს დაამატეთ იგივე მნიშვნელობა, გამოყოფთ მას "ჰეშის" ნიშნით. სტილის სრული აღწერა ამ შემთხვევაში შეიძლება ასე გამოიყურებოდეს: img # OnePic {სიმაღლე: 50%;}
