Тег img

Тегот img создава слика. Патот до сликата се пропишува во атрибутот src. Не бара затворање тег.

Атрибути

Атрибут	Опис
src	Го задава патот до сликата. Задолжителен атрибут.
alt	Алтернативен текст, кој ќе се прикаже наместо сликата, доколку таа не е пронајдена (на пример, погрешно е напишан патот до неа). Задолжителен атрибут. Во негово отсуство валидаторот (програма која проверува коректност на HTML или CSS) ќе јави грешка.
width	Ширина на сликата, во пиксели (во овој случај единиците за мерење не се наведуваат) или проценти од родителот на сликата.
height	Висина на сликата, во пиксели (во овој случај единиците за мерење не се наведуваат) или проценти од родителот на сликата.

Нијанси

Доколку за сликата не се зададени ни ширина, ни висина - сликата ќе има своја вистинска големина. Доколку е зададена висина - сликата ќе добие зададена висина, а по ширина ќе се прилагоди така што нејзините пропорции нема да бидат изкривени.

Доколку е зададена само ширина - слично, сликата ќе се прилагоди по висина за да ги зачува пропорциите.

Доколку се зададени и ширина и висина - пропорциите на сликата може да бидат изкривени (а може и не, како што погодите). Доколку ширината или висината (или и двете заедно) се поголеми од реалната - сликата ќе се зголеми, но ќе изгуби во квалитет.

Се препорачува да се задаваат ширина и висина на сликите во атрибути (а не преку CSS) - во овој случај прелистувачот побрзо ќе ги вчитува сликите - нема потреба да ја пресметува големината на секоја слика откако ќе ја добие.

Не се препорачува да се намалуваат реалните димензии на сликата без потреба. На пример, реалната големина на сликата е 1000 на 1000 пиксели, а вие ќе и зададете ширина од 100px. Во овој случај сликата на екранот ќе изгледа 100 пиксели, но ќе има големина од цела илјада и, соодветно, ќе се вчитува многу подолго.

Пример

Ајде на веб-страницата да додадеме слика и да не и зададеме атрибути height и width. Сликата ќе има своја вистинска големина:

:

Пример

Ајде да пробаме на сликата да и додадеме ширина со атрибутот width, висината при тоа треба да се прилагоди за да се зачуваат пропорциите на сликата:

:

Пример

А сега ајде на сликата да и додадеме висина со атрибутот height, ширината при тоа ќе се прилагоди за да се зачуваат пропорциите на сликата:

:

Пример

Ајде истовремено на сликата да и додадеме и висина, и ширина. Пропорциите на сликата при тоа треба да бидат изкривени (не мора, но во овој случај висината и ширината се подбрани така што пропорциите се изкривени):

:

Пример

Ајде да ставиме погрешен пат до сликата (за едноставност ќе го оставиме празен). Наместо слика ќе ја видиме содржината на атрибутот alt (изгледа како обичен текст - но обидете се да го копирате - нема да успеете, ќе се повлече како слика):

:

Погледни исто така