Hiper mətn işarəsi dilində (HTML), səhifədəki şəkli göstərmək üçün xüsusi “tag” əmri istifadə olunur. Bu etiket img olaraq adlandırılır və bir sıra dəyişənlər - "atributlar" ehtiva edir. Atributların köməyi ilə ölçünün də daxil olduğu bir şəklin hiper mətn səhifəsində göstərilməsinin bütün aspektlərini təyin edə bilərsiniz. Bununla birlikdə, problemi həll etməyin yeganə yolu bu deyil - Cascading Style Sheets (CSS) istifadə edərək görüntünün ölçüsünü də azalda bilərsiniz.
Təlimat
Addım 1
Boy və en atributlarını istədiyiniz görüntünün göstərilməsindən məsul olan etikete yerləşdirin. Birincisini şəklin şaquli ölçüsünə, ikincisini isə üfüqi olaraq seçin. Hər iki rəqəmi də piksel şəklində qoyun, ancaq vahidləri göstərməyə ehtiyac yoxdur - px - burada. Bu atributlar üçün lazımi dəyərləri hesablayarkən şəklin azalma nisbətlərinə riayət olunmasına diqqət yetirin, əks halda təhrif olunmuş formada göstəriləcəkdir. Məsələn, başlanğıc ölçüləri 500 ilə 300 piksel olan SomePic.
Addım 2
Orijinal görüntü ölçülərinin nisbətdə azalmasını yüzdə ilə təyin edə bilərsiniz. Bunu etmək üçün genişliyi göstərmədən yalnız hündürlük atributundan istifadə edin və ölçüsü təyin edən nömrəni göstərdikdən sonra faiz işarəsi əlavə edin. Məsələn, bu formada yazılmış bir etiketlə əvvəlki addımdakı nümunədəki kimi təsiri əldə edə bilərsiniz:
Addım 3
Stillərin təsvirindən istifadə edərək şəklin ölçüsünü təyin etmək istəyirsinizsə, eyni etiket adından - img - və atributlardan - en və hündürlükdən istifadə edin. Bu vəziyyətdə ölçü vahidləri - px, pt və ya% həmişə göstərilməlidir. Səhifədəki bütün şəkillərin ölçüsünün yarıya endirilməsini təyin etmək üçün aşağıdakı yazını üslub təsviri blokuna yerləşdirin: img {height: 50%;} Yalnız bir görüntünün ölçüsünü kiçiltməyiniz lazımdırsa, əlavə id atributu əlavə edin etiketinə əlavə edin və bu səhifə dəyərinin şəkilləri üçün unikal birini təyin edin - məsələn, PicOne: Etiket adından bir "hash" # ilə ayıraraq eyni dəyəri stil qeydinə əlavə edin. Bu vəziyyətdə tam stil təsviri belə görünə bilər: img # OnePic {boy: 50%;}
